jQuery加载ajax调用后加载gif

Question

我正在尝试使用gif填充div。当用户单击搜索按钮时，第一个指令是加载gif。然后执行ajax，最后用结果替换loading gif。我在开发工具的“网络”标签中看到的是，加载的gif一直待处理，直到ajax调用完成为止，这完全违背了加载gif的目的。没有ajax调用，加载的gif即刻加载。

$('body').on('click', '#searchForDids', function () {
  $('#results').html("<img src='images/loading.gif' width='250px'>");
  var npa = $('#npa').val();
  var nxx = $('#nxx').val();
  var consec = $('#consec').val();
  var token = $('#_token').val();
  $.ajax({
    type: "POST",
    data: {
      'npa': npa,
      'nxx': nxx,
      'consec': consec,
      '_token': token
    },
    url: "/telnyxSearch",
    success: function (result) {
      $('#results').html(result);
      console.log(result);
    }
  })
})

如果我替换

$('#results').html("<img src='images/loading.gif' width='250px'>");

具有：

$('#results').html('cat');

猫会立即显示出来，就像我希望加载gif一样。我知道图片的网址是正确的。

基于下面的重复投票，我看了This Answer：

    $('body').on('click','#searchForDids',function(){
    var npa = $('#npa').val();
    var nxx = $('#nxx').val();
    var consec = $('#consec').val();
    var token = $('#_token').val();
    $.ajax({
        type:"POST",
        data:{'npa' : npa,
              'nxx' : nxx,
              'consec' : consec,
              '_token' : token},
        url:"/telnyxSearch",
        beforeSend: function() {
            $('#results').html("<img src='images/loading.gif' width='250px'/>");
        },
        success:function(result){
            $('#results').html(result);
            console.log(result);
        }
    })
})

我仍然得到相同的结果。

再次：如果我使用一些随机字符串，则效果很好，当我尝试使用loading.gif图片时，它只会失败……