javascript - 预加载图像不起作用

Question

我的脚本有问题。

我正在尝试将所有图像加载到一个数组中，然后在继续之前检查它们是否都已加载。但它不起作用我同样没有收到任何错误，所以我不确定出了什么问题。

这就是我所拥有的：

window.requestAnimFrame = (function(){
  return  window.requestAnimationFrame       || 
          window.webkitRequestAnimationFrame || 
          window.mozRequestAnimationFrame    || 
          window.oRequestAnimationFrame      || 
          window.msRequestAnimationFrame     || 
          function( callback,  element){
            window.setTimeout(callback, 200 / 100);
          };
})();

function img_loader(){

for(var i in Images){
        Images[i]['img_src'].onload = function() {
            countImages ++;
        }
    }
}

function img_load_checker(){

    if(countImages == Images.length){
        return true;
    } else {
        requestAnimFrame( img_load_checker );   // keep checking
    }
}


window.countImages = 0;
img_loader();
    if(img_load_checker()){
            //this never gets executed - reason is unknown
    //continue with rest of the script
    }

这是结构console.log(Images);

[1: Object, 2: Object]
1: Object
img_src: <img>
2: Object
img_src: <img>

任何人都可以看到错误吗？

Answer 1

你的 if 语句永远不会那样工作。

该函数调用不会神奇地坐在那里等待异步调用返回。

if(img_load_checker()){
        //this never gets executed - reason is unknown
//continue with rest of the script
}

使用回电！

for(var i in Images){
        Images[i]['img_src'].onload = function() {
            countImages ++;
            if (countImages == Images.length) {
                callSomeMethod();  <-- Call back
            }
        }
    }
}

或者

function img_load_checker(){

    if(countImages == Images.length){
        callNextStep();
    } else {
        requestAnimFrame( img_load_checker );   // keep checking
    }
}
img_load_checker();

Answer 2

您不需要计时器：

Images[i]['img_src'].onload = function() {
    if(countImages++ >= Images.length)
    {
         loadingHasFinishedNowDoWhateverYouWant();
    }

}