首页 > 代码库 > 延迟加载图片
延迟加载图片
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var wait_load = $(‘.wait_load‘);
wait_load.opacity(0);
$(window).bind(‘scroll‘, function () {
setTimeout(function () {
for (var i = 0; i < wait_load.length(); i ++) {
var _this = wait_load.ge(i);
if ((getInner().height + getScroll().top) >= offsetTop(_this)) {
$(_this).attr(‘src‘, $(_this).attr(‘xsrc‘)).animate({
attr : ‘o‘,
target : 100,
t : 30,
step : 10
});
}
}
}, 100);
});
</script>
</head>
<body>
<div id="photo">
<dl>
<dt><img xsrc="http://www.mamicode.com/images/p1.jpg" src="http://www.mamicode.com/images/wait_load.jpg"
class="wait_load" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="http://www.mamicode.com/images/p2.jpg" src="http://www.mamicode.com/images/wait_load.jpg"
class="wait_load" /></dt>
<dd>延迟加载图片</dd>
</dl>
<dl>
<dt><img xsrc="http://www.mamicode.com/images/p3.jpg" src="http://www.mamicode.com/images/wait_load.jpg"
class="wait_load" /></dt>
<dd>延迟加载图片</dd>
</dl>
</div>
</body>
</html>
延迟加载图片