加载所有图像后的jquery事件（包括缓存图像）？

I have the following function which is for ajaxing in a page and the showing it only once all the images are loaded:

我有以下功能，用于在页面中进行ajaxing，并且只在加载所有图像后显示它：

$.get('target-page.php', function(data){    
    var $live = $('#preview_temp_holder').html(data);
    var imgCount = $live.find('img').length;
    $('img',$live).load(function(){ 
        imgCount--;
        if (imgCount==0){
            //DO STUFF HERE ONCE ALL IMAGES ARE LOADED
            $('#preview_pane').html($live.children()).fadeIn(800);
            $live.children().remove();            
        }
    });                
});

The problem comes with cached images not firing the .load() event and thus not decrementing the imgCount.

问题是缓存的图像没有触发.load（）事件，因此不会减少imgCount。

I know i need to implement Nick Craver's solution but am not sure how. Can anyone help me?

我知道我需要实施Nick Craver的解决方案但不确定如何。谁能帮我？

3 个解决方案

#1

I spent a long time looking for solutions for this. The plugin suggested on the jQuery API page (https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js) did not work in firefox.

我花了很长时间为此寻找解决方案。 jQuery API页面（https://github.com/peol/jquery.imgloaded/raw/master/ahpi.imgload.js）上建议的插件在firefox中不起作用。

My solution was to loop through each image and only add the load event if it was not already loaded (i.e. cached by the browser). The code below includes a counter that I was using to check that load events were only firing for images not already in the cache:

我的解决方案是循环遍历每个图像，只添加加载事件（如果它尚未加载（即由浏览器缓存））。下面的代码包括一个计数器，我用它来检查加载事件是否仅针对缓存中尚未存在的图像触发：

$(document).ready(function () {

    var images = $("img.lazy");
    $(".image-wrapper").addClass("loading");

    var loadedCount = 0;
    images
        .hide()
        .each(function () {
            if (!this.complete) {
                $(this).load(function () {
                    loadedCount++;
                    console.log(loadedCount);
                    displayImage(this);
                });
            }
            else {
                displayImage(this);
            }
        });
});

function displayImage(img) {
    $(img).fadeIn(300, function () {
        $(this).parents(".image_wrapper").removeClass("loading");
    });
}

I'm no javascript expert so if you spot any problems with this solution please do let me know. As I say, it works in IE8, Chrome and Firefox (not sure about older versions of IE).

我不是javascript专家，所以如果您发现此解决方案的任何问题，请告诉我。正如我所说，它适用于IE8，Chrome和Firefox（不确定IE的旧版本）。

#2

Ok, managed to get them merged:

好的，设法让它们合并：

$.get('target-page.php', function(data){    
    var $live =         $('#preview_temp_holder').html(data);
    var $imgs =         $live.find('img')
    var imgCount =      $imgs.length;            

    $imgs.one('load', function() {        
        imgCount--;
        if (imgCount==0){
            //DO STUFF HERE
            //ALL IMAGES ARE LOADED
            $('#preview_pane').html($live.children()).fadeIn(800);

        }        
    })
    .each(function() {
        if(this.complete){
            $(this).load();
        }
    });
});

note: a 404-ing image would break this.

注意：404图像会打破这个。

#3

Change:

更改：

$('img',$live).one('load', function(){
  ...
});

And after above append:

并在上述追加之后：

$live.find('img').each(function() {
  if(this.complete) $(this).load();
});

Generally I suggest to reuse $live.find('img') from previous count statement.

通常我建议从以前的count语句中重用$ live.find（'img'）。

#1