如何判断一个div中的所有图片加载完成

由于在 HTML 中 <img/> 标签每出现一次就会创建一个 Image 对象,因此判断一个图片是否加载完成,我们可以通过监听 Image 对象的 load 事件来完成,这里可以直接看下代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
width: 50px;
height: 50px;
}
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zepto/1.2.0/zepto.min.js"></script>
</head>
<body>
<div class="content">
<img src="http://si1.go2yd.com/get-image/0ElZvnA6O6S" alt="">
<img src="http://si1.go2yd.com/get-image/0ElZw8vf6n2" alt="">
<img src="http://si1.go2yd.com/get-image/0ElZwScb692" alt="">
<img src="http://si1.go2yd.com/get-image/0ElZvnA6O6S" alt="">
<img src="http://si1.go2yd.com/get-image/0ElZw8vf6n2" alt="">
<img src="http://si1.go2yd.com/get-image/0ElZwScb692" alt="">
<img src="http://si1.go2yd.com/get-image/0ElZvnA6O6S" alt="">
<img src="http://si1.go2yd.com/get-image/0ElZw8vf6n2" alt="">
<img src="http://si1.go2yd.com/get-image/0ElZwScb692" alt="">
</div>

<script>
$(function () {
console.log('page onload');
var imgCount = 0;
var imgTotal = $('.content img').length;
console.log(imgTotal);

$('.content img').each(function () {
$(this).on('load', function () {
imgCount++;
console.log(imgCount);
if (imgCount === imgTotal) {
console.log('all images loaded');
}
});
});

console.log('console before [all images loaded]');
});
</script>
</body>
</html>

参考:
http://www.cnblogs.com/sandy-happyhour/p/4817421.html
http://bbs.csdn.net/topics/350050446