我想使用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);
}
});
.load()的文档：http://api.jquery.com/load-event/。文档指出：“Ajax模块也有一个名为`.load()`的方法。哪个被触发取决于传递的参数集。”请注意，由于存在两个名为`.load()`的不同函数会让人们感到困惑（就像你一样！），因此仅使用`.load()`来绑定处理程序已被弃用，而应使用`.on('load', handler)`。我正在编辑答案以使用非弃用形式。 - Mark Amery如果你确实需要使用Ajax...
我遇到过一些情况，其中onload处理程序不是正确的选择。在我的情况下，是通过javascript打印时。因此，对于这种情况，有两个选项可以使用Ajax风格：
解决方案1
使用Base64图像数据和REST图像服务。如果您有自己的Web服务，可以添加一个JSP/PHP REST脚本，以Base64编码提供图像。现在这有什么用？我发现了一个很酷的新语法用于图像编码：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhE..."/>
你可以使用Ajax加载图像的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();
});
然而，这两种方法都有其缺点：第一种只适用于现代浏览器。第二种存在性能故障，并且依赖于如何使用缓存的假设。
祝好， will
使用jQuery，您可以简单地将“src”属性更改为“data-src”。图像不会被加载。但是位置将 与 标签一起存储。我喜欢这样。
<img class="loadlater" data-src="path/to/image.ext"/>
$(document).ready(function(){
$(".loadlater").each(function(index, element){
$(element).attr("src", $(element).attr("data-src"));
});
});
我敢打赌jQuery代码可以缩写，但这样写也很容易理解。
data-标签，那么通过$(element).data('src')访问它们要比通过$(element).attr('data-src')更容易。请注意不要改变原文的意思。 - Maxim Kumpan$(<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);
});
var image = new Image();
image.src = 'image url';
image.onload = function(e){
// functionalities on load
}
$("#img-container").append(image);
如果你只想设置图像的来源，可以使用以下方法。
$("img").attr('src','http://somedomain.com/image.jpg');
<script>
$(document).ready(function() {
$.ajaxSetup({
cache: false
});
$("#placeholder").load("PATH TO IMAGE");
var refreshId = setInterval(function() {
$("#placeholder").load("PATH TO IMAGE");
}, 500);
});
</script>
$("#img_id").error(function(){
//$(this).hide();
//alert("img not loaded");
//some action you whant here
});
注意 - 当img标签的src属性为空时，.error()事件将不会被触发。
//Puedes optar por esta solución:
var img = document.createElement('img');
img.setAttribute('src', element.source)
img.addEventListener('load', function(){
if (!this.complete || typeof this.naturalWidth == "undefined" || this.naturalWidth == 0) {
alert('broken image!');
} else {
$("#imagenesHub").append(img);
}
});