检查图像加载完成

Question

我有一页有太多图像，这些图像被不平等地划分为divs，哪些类是photossetc。包含所有divs 的主要div 的ID 为infscroll。在开头每个div visibility 是hidden 和position 是absolute 并且每个div 都有一个名为attribute 的myflagc 其值为"notok"。

我不想等待页面中的所有图像加载显示divs 因此绑定加载到窗口不是一个选项，而是我想显示每个div 独立加载的内容。

这是我制作的 jQuery/JavasScript 代码：

function imagesloaded(){

    var infscrolllength=jQuery('#infscroll').find('.photossetc').length;
    // gets the numbers of divs
    var completedsts = 0;
    // variable for the number of divs that completed loading (set to 0)

        jQuery('#infscroll .photossetc').each(function(){
        // loops over the divs

            if(jQuery(this).attr("myflagc")=="notok"){
                var photosetclength = jQuery(this).find('img').length;
                var totalcomplete = 0;
                jQuery(this).find('img').each(function(){
                    if(this.complete){
                        totalcomplete++;
                    }
                })
                if(totalcomplete==photosetclength){
                    sortpho(jQuery(this));
                    completedsts++;
                }
            }
            else{
                completedsts++;
            }
    })
    if(infscrolllength != completedsts){
        imagesloaded();
    }

}

function sortpho(setselector){
    setselector.css({"position":"relative"});
    setselector.css({"visibility":"visible"});
    setselector.attr({"myflagc":"ok"});
}

jQuery(document).ready(function(){
imagesloaded();

});

但是，由于未知原因，此代码似乎无法正常工作。然而，我注意到的是，如果我在 imagesloaded() 函数的任何地方添加一个 alert ，它可以正常工作，这通常意味着 DOM 还没有准备好，但由于我使用的是 jQuery(document).ready 它不能那样。我还尝试在此块的末尾添加警报：

if(infscrolllength != completedsts){
    imagesloaded();
    alert("not completed yet");
}

我注意到它会触发很多次，直到所有图像都加载完毕，这意味着代码是正确的，因此我不明白为什么没有alert 就无法工作。

我知道我可以为每个div 发送bind load 事件，但load 存在缓存图像问题，所以我想避免使用它。

有解决办法吗？更重要的是，我想了解为什么这段代码不起作用。

更新：解决方法

正如 Christian Landgren 提到的（见答案）； JavaScript 函数不断循环阻止页面呈现（即加载内容）。

我找到了一种解决方法来实现我想要的并且不完全依赖.load 方法。这是代码：

function imagesloaded(){
    var mysets=[];
    var setnbr=0;
    var iditer=0;
    jQuery('#infscroll .photossetc').each(function(){
        jQuery(this).attr({"id":"photosetn"+iditer});
    // giving a unique id to every div
        iditer++;
    })
    jQuery('#infscroll .photossetc').each(function(){
        var myset=[];
    // creating an array to hold the following info 0:id of div - 1: nbr of images in div - 2: nbr of images that finished loading
        myset[0]=jQuery(this).attr("id");
        myset[1]=jQuery(this).find('img').length;
        myset[2]=0;
        jQuery(this).find('img').each(function(){
            if(this.complete){  // for when the image is already cached or already loaded
                myset[2]=myset[2]+1;
            }
            else{ // for when the image isn't cached nor loaded yet
                jQuery(this).load(function(){
                    for(i=0;i<mysets.length;i++){
                        var myiset=mysets[i];
                        if(jQuery(this).parents('#infscroll .photossetc').attr("id")==myiset[0]){
                            myiset[2]=myiset[2]+1;
                            if(myiset[1]==myiset[2]){
                                jQuery('#'+myiset[0]).css({"position":"relative","visibility":"visible"});
                            }                                   
                            mysets[i]=myiset;
                        }
                    }
                })
            }
        })
        if(myset[1]==myset[2]){
            jQuery('#'+myset[0]).css({"position":"relative","visibility":"visible"});
        }
        mysets[setnbr]=myset;
        setnbr++;
    })
}

Answer 1

Javascript 正在阻塞，这意味着您的循环将阻塞所有 javascript 执行，直到满足该语句。当您添加警报时，您至少让背景布局威胁在后台加载图像，直到您按 OK 并继续循环。

如果您想跟踪已加载的图像数量，您需要在每个图像上附加一个 onload 事件，该事件独立更新加载计数器。

类似这样的：

var loadCounter = 0;

function allDone(){
  // all images are loaded.
}

function imageLoaded(){
  loadCounter++;
  if (loadCounter === $('img').length){
    allDone();
  }
}

$('img').on('onload', imageLoaded)

当你说你不能使用 onload 事件时，你能详细说明一下吗？您需要跟踪加载事件以了解何时加载所有内容。我已经成功地使用了它，并且它也适用于缓存图像 - 根本没有任何问题。

另一个（不太复杂的）选项是使用间隔全局检查加载计数。

另一个提示，如果您正在开发无限滚动，您需要使用队列来处理您开始加载的图像。当前无法中止单个图像请求。这意味着一旦您将图像添加到 DOM 树中，它将在布局引擎中排队，您无法从队列中删除该图像。

解决这个问题的一个好方法是使用 Async.queue 机制并将 onload 事件附加到 async next 方法。