用js怎么判断js中加载所有的图片是否加载完成？

JavaScript017

用js怎么判断js中加载所有的图片是否加载完成？,第1张

window.onload方法是窗口内所有内容都加载完毕后才会执行的。

可以这么来判断（参考思路，代码是伪的，不规范）：

isAllLoaded = false// window对象上的全局变量

window.onload = function(){

// 所有内容，包括图片，加载完毕后执行

isAllLoaded = true

}

if(isAllLoaded) {

blahblahblah

}

(1)方法 1 <script type="text/javascript ">var obj=new Image()obj.src="http://www. phpernote.com/uplo adfiles/editor/20110 7240502201179.jpg"obj.onload=function（）

  { alert('图片的宽度为: '+obj.width+'图片的 高度为:'+obj.height)document.getElemen tById("mypic").innner HTML="<img src='"+this.src+"' />"

}

</script>

<div id="mypic">onloadi ng......</div>

方法 2

<script type="text/javascript ">

var obj=new Image()obj.src="http://www.phpernote.com/uploadfiles/editor/201107240502201179.jpg"

obj.onreadystatechange=function(){ if(this.readyState==" complete")  alert('图片的宽度为: '+obj.width+'图片的 高度为:'+obj.height)document.getElementById("mypic").innner HTML="<img src='"+this.src+"' />"

}

}

</script>

<div id="mypic">onloadi

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

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

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

具体示例代码：

var n=$pre4y_main.length

...

$img[0].onload=function(){    ...

    n--

    if(!n){

        //执行其他JS代码

    }

}