jQuery Ajax 等待所有图像加载完毕

Question

我正在尝试使用 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 编写的插件由于某种原因对我不起作用......我不明白为什么。但他的代码确实激发了我想出一个更适合我的轻量级解决方案。它使用 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 错误），则无论如何都会解决 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
});

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

您可以使用 imagesloaded 插件JavaScript 和 jQuery，尝试在加载的内容上使用内部 ajax success 回调函数，并在 imagesloaded 回调函数不触发时隐藏所有内容，请参见下面的示例代码

$.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

试试这个代码。效果很好。

$.ajax({
    url: "../api/listings",
    type: 'GET',
    success: function (html) {
        $('#container').append(html);
        $('#container img').on('load', function(){console.log('images loaded')});
    };
});

Answer 9

当丹尼尔的解决方案中的插件找不到图像时，我遇到了一个小错误。

以防万一其他人遇到同样的问题：

更改：

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