我想使用 jQuery 在我的页面上异步加载外部图像，我尝试了以下操作：
$.ajax({
url: "http://somedomain.com/image.jpg",
timeout:5000,
success: function() {
},
error: function(r,x) {
}
});
但它总是返回错误，甚至可以像这样加载图像吗？
我尝试使用.load方法并且它有效，但是如果图像不可用（404），我不知道如何设置超时。我怎样才能做到这一点？
不需要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);
}
});
如果你真的需要使用 AJAX ......
我遇到过 onload 处理程序不是正确选择的用例。就我而言，当通过 javascript 打印时。所以实际上有两个选项可以为此使用 AJAX 样式：
方案一
使用 Base64 图像数据和 REST 图像服务。如果您有自己的网络服务，您可以添加一个 JSP/PHP REST 脚本，以提供 Base64 编码的图像。现在这有什么用？我遇到了一个很酷的图像编码新语法：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>
因此，您可以使用 Ajax 加载 Image Base64 数据，然后在完成后将 Base64 数据字符串构建到图像中！非常有趣 ：）。我建议使用此站点http://www.freeformatter.com/base64-encoder.html进行图像编码。
$.ajax({
url : 'BASE64_IMAGE_REST_URL',
processData : false,
}).always(function(b64data){
$("#IMAGE_ID").attr("src", "data:image/png;base64,"+b64data);
});
解决方案2：
欺骗浏览器使用其缓存。当资源在浏览器缓存中时，这会给你一个很好的fadeIn()：
var url = 'IMAGE_URL';
$.ajax({
url : url,
cache: true,
processData : false,
}).always(function(){
$("#IMAGE_ID").attr("src", url).fadeIn();
});
然而，这两种方法都有其缺点：第一种只适用于现代浏览器。第二个有性能故障，并依赖于如何使用缓存的假设。
欢呼，将
使用 jQuery，您可以简单地将“src”属性更改为“data-src”。图像不会被加载。但是位置与标签一起存储。我喜欢的。
<img class="loadlater" data-src="path/to/image.ext"/>
一个简单的 jQuery 将 data-src 复制到 src，它将在您需要时开始加载图像。在我的情况下，页面已完成加载。
$(document).ready(function(){
$(".loadlater").each(function(index, element){
$(element).attr("src", $(element).attr("data-src"));
});
});
我敢打赌 jQuery 代码可以缩写，但这样可以理解。
$(<img />).attr('src','http://somedomain.com/image.jpg');
应该比 ajax 更好，因为如果它是一个画廊并且您正在循环浏览图片列表，如果图像已经在缓存中，它不会向服务器发送另一个请求。它将在 jQuery/ajax 的情况下请求并返回 HTTP 304（未修改），然后使用缓存中的原始图像（如果它已经存在）。上述方法减少了图库中第一次循环图像后对服务器的空请求。
您可以使用延迟对象进行异步加载。
function load_img_async(source) {
return $.Deferred (function (task) {
var image = new Image();
image.onload = function () {task.resolve(image);}
image.onerror = function () {task.reject();}
image.src=source;
}).promise();
}
$.when(load_img_async(IMAGE_URL)).done(function (image) {
$(#id).empty().append(image);
});
请注意：image.onload 必须在 image.src 之前，以防止出现缓存问题。