javascript - 从文件名数组中预加载一堆图像，完成 50% 后执行功能

Question

嘿，我正在使用这个脚本

function preloader(images){
         var i = 0;
         imageObj = new Image();


         // start preloading
         for(i=0; i<=images.length; i++){
            imageObj.src=images[i];
            imageObj.onLoad = check(i, images.length / 2);
         };

    }

并将一堆图像传递给它以进行预加载。

check() 函数是这样的

check = function(e,i){
        if( e == i ){
             run_fading_gallery(imgcode);
            $(".loading").hide();
        };
    }

但它似乎没有工作。

有任何想法吗？或者有什么我可以在线使用的吗？

Answer 1

问题是您只设置了 1 个 imageObj 并更改了它的源和事件处理程序。为什么不尝试为每个图像创建一个图像对象？（在你的循环中）。

更具体：

function preloader(images){
         var i = 0;

         // start preloading
         for(i=0; i<=images.length; i++){
            imageObj = new Image();
            imageObj.src=images[i];
            imageObj.onLoad = check(i, images.length / 2);
         };

    }

Answer 2

images.length / 2如果数组中有奇数个图像，则不会是整数，因此i在检查函数中它永远不会等于。尝试Math.floor：

function preloader(images){
     var i = 0;
     imageObj = new Image();


     // start preloading
     for(i=0; i<=images.length; i++){

        imageObj.onLoad = check(i, Math.floor(images.length / 2));
        imageObj.src=images[i];
     };

}

Answer 3

不起作用。假设您有 100 张图像。图像异步加载。如果加载的第一个图像是第 50 个图像，则该函数将显示已加载 50 个图像，而仅加载了 1 个图像。