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

小编典典

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

ajax

我有以下功能，用于页面修饰，仅在加载所有图像后才显示：

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

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

阅读 175

2020-07-26

共1个答案

小编典典

好的，设法将它们合并：

$.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像素的图片会破坏此效果。

2020-07-26