使用 AJAX 加载时显示加载 GIF 图像

Question

   $.ajax({
        url: "/image/productImages.jpg",
        timeout:5000,

        beforeSend: function(){
    // Handle the beforeSend event
        $('##loading').show();
        },

        complete: function(){
        // Handle the complete event
        $('##loading').hide();
        },

        success: function (data) {
            alert("image was added successfully");
        },

        error: function () {
            alert("There was an error. Image could not be added, please try again");
        }
    });

我想在加载图像时显示显示加载 gif，然后在加载图像后将其删除。在这里，我有这段代码可以做到这一点，但是，这会直接出错。有谁知道为什么或如何解决这个问题。提前致谢！

Answer 1

所以我发现您无法在 .ajax 标记中将图像加载为 url。感谢您的回复，但##loading 仅适用于冷融合标签

.load() 建议如下：

 var img = $("<img />").attr('src', 'http://somedomain.com/image.jpg')
                  .load(function() {
                     if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
                         alert('broken image!');
                     } else {
                         $("#something").append(img);
                     }
          });

但是，这也破坏了我已经实现的代码，并且在 IE 中不起作用......很遗憾。

Answer 2

如果您要访问错误处理程序，则错误将与服务器返回的数据有关。尝试将此作为错误处理程序以获取有关正在发生的事情的更多信息（在浏览器的控制台中查看结果）：

error: function (x,y,z) {
    alert("There was an error. Image could not be added, please try again");
    console.log(x,y,z);
    //alert(x + "\n" + y + "\n" + z);
}

不过，有一种更简单的方法可以预加载图片。试试这个：

$("#loading").show();
var img = new Image();
$(img).load(function(){
    $("#loading").hide();
});
img.src = "/image/productImages.jpg";

Answer 3

您的 id 选择器有两个哈希，

试试这个：

 $('#loading').show();