Image loader не отображается на странице html

Question

Я использую jQuery ajax для загрузки файла загрузчика изображений .gif, когда отправляется запрос на передачу данных. Я использую beforeSend для добавления изображения в div с идентификатором. когда результаты будут найдены, изображение исчезнет. Я использовал хромированную проверку, чтобы увидеть, покажет ли это изображение. веб-страница не показывает GIF

Аякса JQuery:

$(document).ready(function(){ 
    $("#whois").submit(function(){ 
    var site = $("#site").val(); 
    $.ajax({ 
     url: "whohelper.php", 
     type: "POST", 
     data: { ip: site }, 
     async: false, 
     dataType: "html", 
     beforeSend: function() { 
     $("#rs").html('<img src="ajax-loader.gif"/>'); 
     }, 
     success: function(result) { 
     $("#rs").html(result); 
     }, 
     error: function() { 
     $("#rs").html('<strong>ERROR:</strong> Please try again later'); 
     } 
    }); 
    return false; 
    }); 
}); 

Answer 1

Preload изображение, поместив его в DOM, скрывая его. Это гарантирует, что при вызове AJAX изображение будет загружено.

<img id="loader" src="ajax-loader.gif" style="display: none;"> 

Тогда в вашем JS просто покажите/скройте загружаемое изображение.

$(document).ready(function(){ 
    $("#whois").submit(function(e) { 
     // better to use e.preventDefault(); than return false; 
     e.preventDefault(); 

     // always a good idea to cache elements that you will re-using 
     var $rs = $('#rs'), 
      $loader = $('#loader'); 

     var site = $("#site").val(); 

     // show loading image 
     $loader.css('display', ''); 

     $.ajax({ 
      url: "whohelper.php", 
      type: "POST", 
      data: { ip: site }, 
      async: false, // bad idea 
      dataType: "html", 
      success: function (result) { 
       $rs.html(result); 
      }, 
      error: function() { 
       $rs.html('<strong>ERROR:</strong> Please try again later'); 
      }, 
      complete: function() { 
       // hide loading image 
       $loader.css('display', 'none'); 
      } 
     }); 
    }); 
}); 

Если изображение еще отсутствует, возможно, у вас есть неправильный путь к вашему изображению.