可以用jQuery异步加载图片吗？

使用 jQuery 异步加载图像

问题：

尝试异步加载外部图像使用带有以下代码的 jQuery：

$.ajax({ 
   url: "http://somedomain.com/image.jpg", 
   timeout:5000,
   success: function() {

   },
   error: function(r,x) {

   }
});

会导致错误响应。 jQuery 可以实现异步图像加载吗？如果没有，如何异步加载图片？

解决方案：

使用 jQuery 确实可以实现异步图片加载。但是，$.ajax() 方法不适合此任务。相反，首选方法是动态创建一个新的图像元素并为其附加事件处理程序：

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

此方法使用本机 HTML5 图像加载机制，当图像完全加载时会触发加载事件已加载。通过检查complete、naturalWidth和naturalHeight属性，您可以确定图像是否已成功加载并防止损坏图像警告。

以上是可以用jQuery异步加载图片吗？的详细内容。更多信息请关注PHP中文网其他相关文章！