jQuery的事件一旦所有图像载入（包括缓存图像）？ [英] jquery event once all images are loaded (including cached images)?

问题描述

我有以下的功能，是ajaxing在一个页面和显示它只有一次所有的图像加载：

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

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

这个问题带有缓存图像不触发的 .load（）事件，因此不递减 imgCount 。

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

我知道我需要实施<一个href="http://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached">Nick Craver的解决方案但我不知道怎么样。谁能帮助我？

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

推荐答案

好了，设法让它们合并：

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

请注意：404-ING形象将打破这种

note: a 404-ing image would break this.

这篇关于jQuery的事件一旦所有图像载入（包括缓存图像）？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！