如何判断一个div中的img全部加载完毕？

momozzzzz 2010-09-14 05:09:28

如题，比如：

<div>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>

我如何知道div下的图片1234全部都加载完毕，jq里有内置方法吗

...全文

536 13 打赏收藏转发到动态举报

写回复

用AI写文章

13 条回复

切换为时间正序

请发表友善的回复…

发表回复

diffmaker 2010-09-20

打赏
举报

楼主可以看一下jQuery的相关资料

momozzzzz 2010-09-15

打赏
举报

[Quote=引用 10 楼 diffmaker 的回复:]

HTML code
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$().ready(function(){
var $img=$('img');
var imgCount=$img.leng……
[/Quote]
$img是一个什么？

diffmaker 2010-09-15

打赏
举报

<script src="jquery.js" type="text/javascript"></script>

    <script type="text/javascript">

        $().ready(function(){

            var $img=$('img');

            var imgCount=$img.length;

            $img.load(function(){

                imgCount--;

                if(imgCount==0){

                    alert("All pictures is loaded.");

                }

            });

        });

    </script>

shenzhenNBA 2010-09-15

打赏
举报

[Quote=引用 4 楼 zhh_bj 的回复:]

回2楼：
如果需要在每个img标签里都加上onload事件，会不会有什么速度方面的影响
[/Quote]
都是在client端运行，对速度的影响应该很小很小,

[Quote=引用 7 楼 brainwkernighan 的回复:]
ie：
JScript code

var imgs =div.getElementsByTagName('img');
for(var i = 0; i<imgs.length;i++){
imgs[i].onreadystatechange = function(){
if(!(imgs[i].readyState=="complete"||imgs[i].readySt……
[/Quote]
onreadystatechange，readyState 好象是XMLHttpRequest对象的相关内容，对图片是否也有这个这些相关内容呢？？？

zhangshaolongjj 2010-09-14

打赏
举报

function FinishLoad(){
picNum+=1;
if(picNum==4) alert("4个图片加载完毕.");
}

运行这个是不会耗时的

brainwkernighan 2010-09-14

打赏
举报

onload函数是一个过程，不一定能成功，还是需要在过程中判断的。

brainwkernighan 2010-09-14

打赏
举报

ie：



var imgs =div.getElementsByTagName('img');

for(var i = 0; i<imgs.length;i++){

  imgs[i].onreadystatechange = function(){

      if(!(imgs[i].readyState=="complete"||imgs[i].readyState=="loaded")){ 

            return false;

}

}

momozzzzz 2010-09-14

打赏
举报

[Quote=引用 5 楼 zhangshaolongjj 的回复:]

顶2楼，
这段代码对性能影响可以忽略的（个人观点）！
[/Quote]
有具体的理由么

zhangshaolongjj 2010-09-14

打赏
举报

顶2楼，
这段代码对性能影响可以忽略的（个人观点）！

momozzzzz 2010-09-14

打赏
举报

回2楼：
如果需要在每个img标签里都加上onload事件，会不会有什么速度方面的影响

MrSLin 2010-09-14

打赏
举报

一般的话

<img src='' onload='alert("done");'/>[

IE有bug，这么写，onload写在前面

var img = new Image;

img.onload = function(){

alert ( img.width );

};

img.src = "test.gif";

shenzhenNBA 2010-09-14

打赏
举报

这样好浏览一点



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312">

<title>无标题文档</title>

</head>

<style type="text/css">

*{font-family:verdana; font-size:12px;}

div{border:1px solid red; padding:2px;}

</style>

<script type="text/javascript">

function $(id){

return "string" == typeof(id) ? document.getElementById(id) : id ;

}

var picNum=0;

function FinishLoad(){

picNum+=1;

if(picNum==4) alert("4个图片加载完毕.");

}

</script>

<body>

<div>

    <img src="1.jpg" onload="javascript:FinishLoad();" />

    <img src="2.jpg" onload="javascript:FinishLoad();" />

    <img src="3.jpg" onload="javascript:FinishLoad();" />

    <img src="4.jpg" onload="javascript:FinishLoad();" />

</div>

</body>

</html>

shenzhenNBA 2010-09-14

打赏
举报

[Quote=引用楼主 zhh_bj 的回复:]
如题，比如：

<div>
<img src="1.jpg" />
<img src="2.jpg" />
<img src="3.jpg" />
<img src="4.jpg" />
</div>

我如何知道div下的图片1234全部都加载完毕，jq里有内置方法吗
[/Quote]
这个有意思，这个参考看看...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
</head>
<style type="text/css">
*{font-family:verdana; font-size:12px;}
div{border:1px solid red; padding:2px;}
</style>
<script type="text/javascript">
function $(id){
return "string" == typeof(id) ? document.getElementById(id) : id ;
}
var picNum=0;
function FinishLoad(){
picNum+=1;
if(picNum==4) alert("4个图片加载完毕.");
}
</script>
<body>
<div>
<img src="1.jpg" onload="javascript:FinishLoad();" />
<img src="2.jpg" onload="javascript:FinishLoad();" />
<img src="3.jpg" onload="javascript:FinishLoad();" />
<img src="4.jpg" onload="javascript:FinishLoad();" />
</div>
</body>
</html>