我正在尝试使用运行良好的 jQuery 执行 Ajax 调用。我使用成功事件来显示数据。然而，似乎一旦加载外部 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,
url: 'ajax/content.php',
success: function(data) {
$('#divajax').html(data).imagesLoaded().then(function(){
// do stuff after images are loaded here
});
}
});
希望这对某人有所帮助。
请注意，使用上面的代码，如果其中一个图像错误（例如，因为 URL 错误），则无论如何都会解决承诺并忽略错误。这可能是您想要的，但是，根据您的情况，如果图像无法加载，您可能希望中止正在执行的任何操作。在这种情况下，您可以按如下方式替换 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
});
【讨论】：
当丹尼尔的解决方案中的插件找不到图像时，我遇到了一个小错误。
以防万一其他人遇到同样的问题：
变化：
// if there's no images, just return an already resolved promise
if (!$imgs.length) {return $.Deferred.resolve().promise();}
收件人：
// if there's no images, just return an already resolved promise
if (!$imgs.length) {
var dfd = $.Deferred();
return dfd.resolve().promise();
}
【讨论】：
您可以使用与JavaScript和jQuery一起使用的imagesloaded插件，尝试在加载内容上使用ajax内部success回调函数，并在imagesloaded回调函数未触发时隐藏所有内容，请参见下面的示例代码
$.ajax({
cache: false,
url: 'ajax/content.php',
success: function(data) {
var $divajax = $('#divajax').html(data).hide();
$divajax.imagesLoaded(function() {
$divajax.show();
});
}
});
【讨论】：
试试这个代码。它工作正常。
$.ajax({ 网址：“../api/listings”， 类型：'GET'， 成功：函数（html）{ $('#container').append(html); $('#container img').on('load', function(){console.log('images loaded')}); }; });【讨论】：
这会在每个 img 加载时单独触发：
$('img').on('load', function() {
// do something
});
我用过：
var loaded = 0;
$('img').on('load', function() {
loaded++;
if(loaded == $('img').length){
// do something
}
});
【讨论】：
您可以将某些内容绑定到加载事件以了解它们何时完成：
$('<img>').bind('load', function() {
$(this).appendTo('body');
});
或者你可以使用this plugin。
【讨论】：
你可以使用我的 jQuery 插件，waitForImages...
$.ajax({
cache: false,
url: 'ajax/content.php',
success: function(data) {
$('#divajax').html(data).hide().waitForImages(function() {
$(this).show();
});
}
});
这会将内容加载到您的元素中，将其隐藏，然后在后代img 元素加载后重新显示。
【讨论】：
我认为最好的是使用这个
$(window).ready(function(){ //load your ajax})
【讨论】：
$(document).ready() 和 $(window).load() 在 AJAX 请求后不会触发。
$('#divajax').html('<br><div style="text-align: center;"><img src="res/ajax-loader.gif"></div>').load(function() {
$.ajax({
cache: false,
url: 'ajax/content.php',
success: function(data) {
$('#divajax').html(data);
}
});
});
【讨论】：
研究使用 jquery 的 .load()
其中有以下描述：
当一个元素和所有子元素都被完全加载后，加载事件会被发送到该元素。此事件可以发送到与 URL 关联的任何元素：图像、脚本、框架、iframe 和窗口对象。
【讨论】：