Question

我正在使用ajax jquery加载图像加载器.gif文件，同时发送数据请求。我正在使用beforeSend将图像添加到带有id的div。当找到结果然后图像消失。我使用铬检查来查看图像是否会显示。网页没有显示gif

ajax 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

通过将图像放入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'); 
            }
        });
    });
});

如果仍然没有图像，那么您的图像路径可能不正确。

图像加载器不会显示在html页面上

1 个答案: