首页 > 其他 > 详细

延迟加载图片

时间:2016-10-31 18:29:08      阅读:250      评论:0      收藏:0      [点我收藏+]

<!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="images/p1.jpg" src="images/wait_load.jpg"
class="wait_load" /></dt>
<dd>延迟加载图片</dd>
</dl>

<dl>
<dt><img xsrc="images/p2.jpg" src="images/wait_load.jpg"
class="wait_load" /></dt>
<dd>延迟加载图片</dd>
</dl>

<dl>
<dt><img xsrc="images/p3.jpg" src="images/wait_load.jpg"
class="wait_load" /></dt>
<dd>延迟加载图片</dd>
</dl>
</div>
</body>
</html>

 

延迟加载图片

原文:http://www.cnblogs.com/annie211/p/6016696.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!