Question

js中，如何等待多个图片加载完后再执行其他的js代码。

代码如下：
var i=0;
var $pre4y_main=$(".y_main:lt(4) img[freealign]");
$pre4y_main.each(function(){
$img=$(this);
$img.attr("src",$(this).attr("data-src"));
$img.attr("Imgvalidate","1");
$img[0].onload=function(){
console.log("step"+i);
i++;
if($(this).attr("freealign")=="1")
{
$(this).css("left", function(){return $(this).attr("x")- $(this)[0].clientWidth+"px"});
}
else if($(this).attr("freealign")=="2")
{
$(this).css("left", function(){return $(this).attr("x")- $(this)[0].clientWidth/2+"px"});
}

};
});
console.log("steptwo");
$(".y_main:lt(4)").show();
$pre4y_main.css("visibility","visible");

火狐控制台返回的值是：
steptwo
step0
step1
step2
step3
step4
...
我想要的结果是：
step0
step1
step2
step3
step4
...
steptwo
请高手不吝赐教。

Answer 1

1. 可以在js全局代码中，增加一个变量n，用作计数器，表示总图片数。

2. 然后使用图片的onload事件，每成功加载一次图片，将计数器n减去1

3. 当n变成0时，表示图片均加载完毕，这时即可开始执行其他JS代码。

具体示例代码：

var n=$pre4y_main.length;
...
$img[0].onload=function(){    ...
    n--;
    if(!n){
        //执行其他JS代码
    }
};

Answer 2

写个回调函数，传进onload里就可以了

追问

写个思路，哥哥

Answer 3

当然啦，这里的onload事件handler是一个异步函数，注册了这个事件的handler之后代码就会继续执行，而当onload事件触发之后才会执行它的handler……

这样多半可以，我给个思路吧

/* 前略 */

var isReady = false; /* isReady 代表 img.onload 是否已经被触发 */

$img[0].onload=function(){
    
    /* 这里放上原本在onload的handler中的代码，这里就不写出了 */
    
    isReady = true; /* 一旦onload事件被触发就把 isReady 变为 true */
});

while(!isReady)
{
    /* 什么也不做，这个循环在isReady变成true之前都会一直拖着程序不继续执行 */
}

console.log("steptwo");

/* 下略 */

追问

但是现在情况有点不同。那就是图片有很多个。要循环的等图片加载完才行。$img[0].onload是放在一个循环里面的。你看下我代码逻辑就知道了。

追答

嗯……我给你改一下吧。另外不要过于依赖库，连个选择器都非要用jQuery最后对你没有好处。

var $pre4y_main = $(".y_main:lt(4) img[freealign]");

/* 这里增加一个计数变量，逻辑就是当这个预计要加载的图片的数量和实际加载完成的图片的数量相同的时候就继续执行代码 */

var imgCount = 4；/* 这个数字取决于你有多少张图片需要加载 */
var imgLoadCount = 0; /* 这个是计数器，现在这个计数器是0 */

$pre4y_main.each(function(){

    /* 前面的具体操作图片属性的代码，略 */
    
    $img[0].onload = function(){
    
        /* onload原本的代码， 略 */
            
        /* 这里当onload的所有代码都执行结束之后，将计数器+1 */
        
        imgLoadCount++;
                           
        };

});

/* 同理，空循环拖住代码 */

while(imgLoadCount != imgCount){};

console.log("steptwo");

/* 下略 */

Answer 4

要把图片当成是图片对象才行~<br>var a=new image(); //这个是原生的js实例化<br>a.src=arr[shownum++].url;<br><br>然后image对象有一个属性“onload”,这个就是加载完成，当加载完成之后你可以执行一个函数比如<br>a.onload=function(){<br>alert("完成加载");<br><br>}<br>这样当你的图片加载完成后就执行下面的函数了~