判断页面所有图片加载完成

在stackoverflow上看到一个问题，大致是说在一个页面有多张图片，那么该怎么样来判断所有图片都已加载完成呢？提问者使用的是jquery.

<img src='xxx.xxx' />
<img src='xxx.xxx' />
<script>
$('img').load(function(){
     alert('img loaded')
})
</script>

比如上面的代码，每张图片加载完后，都会弹出 img loaded,有几张图片加载完，就会弹出几次，而提问者想要的结果是等所有的图片加载完成后才弹出 img loaded,也就是说img loaded 只会弹出一次。看了下前面两位跟帖者的回答，但提问者都说 it doesn’t work,并且他们的方法貌似还有点小复杂。
我的想法是这样的，先得出图片的数量，然后在每一张图片加载完后的事件中把先前得出的图片数量减1，再判断最后的结果是不是0，如果是0则意味着所有图片都加载完了
代码如下：

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<title>all images are loaded</title>
</head>
<body>
<img src="http://res.news.ifeng.com/ba823efb4496b7e7/2011/0707/rdn_4e1520b166d25.jpg" />
<br/>
<img src="http://res.news.ifeng.com/ba823efb4496b7e7/2011/0706/rdn_4e13a50de3d0e.jpg" />
<br/>
<img src="http://res.news.ifeng.com/ba823efb4496b7e7/2011/0706/rdn_4e13a51221e9a.jpg" />
<br/>
<img src="http://res.news.ifeng.com/ba823efb4496b7e7/2011/0706/rdn_4e13a7d6ee1a2.jpg" />
<br/>
<img src="http://res.news.ifeng.com/ba823efb4496b7e7/2011/0706/rdn_4e13a51151c7f.jpg" />
<br/>
<img src="http://res.news.ifeng.com/ba823efb4496b7e7/2011/0706/rdn_4e13a514a9de9.jpg" />
<br/>
<img src="http://res.news.ifeng.com/ba823efb4496b7e7/2011/0706/rdn_4e13a511aec95.jpg" />
<script>
var imgNum=$('img').length;
$('img').load(function(){
    if(!--imgNum){alert('All images loaded')}
})
</script>
</body>
</html>

posted on 2012-06-12 14:09 无双阅读(5479) 评论(1) 编辑收藏举报

无双

导航

统计

公告

搜索

常用链接

我的标签

随笔分类 (95)

随笔档案 (117)

阅读排行榜

评论排行榜

推荐排行榜

最新评论

判断页面所有图片加载完成