我试图执行Ajax调用jQuery，这是工作很好。我使用success事件显示数据。然而，似乎成功会在外部HTML文件加载时立即触发。如果有大图片，他们会在显示后继续加载。有没有办法在一切都满载后显示内容？这里是代码：
$('#divajax').html('<br><div style="text-align: center;"><img src="res/ajax-loader.gif"></div>');
$.ajax({
cache: false,url: 'ajax/content.PHP',success: function(data) {
$('#divajax').html(data);
}
});
解决方法
@alex写的插件没有为我工作的原因…我不明白为什么。但是他的代码激励着我想出一个更轻量级的解决方案，为我工作。它使用jQuery的承诺。请注意，与@alex的插件不同，这不会尝试考虑元素上的背景图片，只有img元素。
// Fn to allow an event to fire after all images are loaded
$.fn.imagesLoaded = function () {
// get all the images (excluding those with no src attribute)
var $imgs = this.find('img[src!=""]');
// if there's no images,just return an already resolved promise
if (!$imgs.length) {return $.Deferred().resolve().promise();}
// for each image,add a deferred object to the array which resolves when the image is loaded (or if loading fails)
var dfds = [];
$imgs.each(function(){
var dfd = $.Deferred();
dfds.push(dfd);
var img = new Image();
img.onload = function(){dfd.resolve();}
img.onerror = function(){dfd.resolve();}
img.src = this.src;
});
// return a master promise object which will resolve when all the deferred objects have resolved
// IE - when all the images are loaded
return $.when.apply($,dfds);
}
然后你可以使用它像这样：
$.ajax({
cache: false,success: function(data) {
$('#divajax').html(data).imagesLoaded().then(function(){
// do stuff after images are loaded here
});
}
});
希望这有助于某人。
注意，使用上面的代码，如果其中一个图像错误(例如，因为URL是错误的)，promise仍然解决，并且错误被忽略。这可能是你想要的，但是，根据你的情况，你可能会反而想中止你正在做的一个图像无法加载。在这种情况下，您可以替换onerror行如下：
img.onerror = function(){dfd.reject();}
并抓住这样的错误：
$('#divajax').html(data).imagesLoaded().done(function(){
// do stuff after all images are loaded successfully here
}).fail(function(){
// do stuff if any one of the images fails to load
});
