jQuery Ajax等到所有图像都加载完毕

Question

我正在尝试使用jQuery执行Ajax调用,该调用运行良好.我使用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);
    }
});

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错误),则无论如何都会解析承诺并忽略错误.这可能是您想要的,但是,根据您的情况,您可能会想要在图像无法加载时中止您正在执行的操作.在这种情况下,您可以按如下方式替换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
   }
});