jQuery的Ajax等待，直到所有的图像加载

我试图用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); } }); 

Answer 1

@alex写的插件由于某种原因不适用于我…我无法弄清楚为什么。 但是他的代码激发了我想出了一个更适合我的更轻量级的解决scheme。 它使用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是错误的），承诺无论如何解决，错误被忽略。 这可能是你想要的，但是根据你的情况，如果图片加载失败，你可能会想放弃你正在做的任何事情。 在这种情况下，您可以如下所示replaceonerror行：

 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 }); 

Answer 2

你可以使用我的jQuery插件， waitForImages …

 $.ajax({ cache: false, url: 'ajax/content.php', success: function(data) { $('#divajax').html(data).hide().waitForImages(function() { $(this).show(); }); } }); 

这将加载到你的元素的东西，隐藏它，然后重新显示一次后代img元素已加载。

Answer 3

您可以将某些事件绑定到加载事件，以了解它们何时完成：

 $('<img>').bind('load', function() { $(this).appendTo('body'); }); 

或者你可以使用这个插件 。

Answer 4

这会在每个img负载上分别触发：

 $('img').on('load', function() { // do something }); 

我用了：

 var loaded = 0; $('img').on('load', function() { loaded++; if(loaded == $('img').length){ // do something } }); 

Answer 5

你可以使用与JavaScript和jQuery一起工作的imagesloaded插件，尝试在加载的内容中使用Ajax successcallback函数，并隐藏所有的内容，而imagesloadedcallback函数不触发，见下面的示例代码

 $.ajax({ cache: false, url: 'ajax/content.php', success: function(data) { var $divajax = $('#divajax').html(data).hide(); $divajax.imagesLoaded(function() { $divajax.show(); }); } }); 

Answer 6

看看使用jquery的.load（）

其中有一个描述：

当它和所有子元素已经被完全加载时，加载事件被发送到元素。 这个事件可以发送到与URL相关的任何元素：图像，脚本，框架，iframe和窗口对象。

Answer 7

 $('#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); } }); }); 

Answer 8

试试这个代码。 它工作正常。

 $就（{
    url：“../api/listings”，
    键入：'GET'，
    成功：function（html）{
         $（ '＃集装箱'）追加（HTML）;
         $（'＃container img'）。on（'load'，function（）{console.log（'images loaded'）}）;
     };
 }）;

Answer 9

Daniel的解决scheme的插件找不到图像时，我有一个小错误。

以防其他人得到相同的问题：

更改：

 // 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(); } 

Answer 10

我认为最好的是使用这个

 $(window).ready(function(){ //load your ajax})