码迷,mamicode.com
首页 > 其他好文 > 详细

延迟加载图片

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

标签:body   image   oct   photo   rip   head   ges   offset   div   

<!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>

 

延迟加载图片

标签:body   image   oct   photo   rip   head   ges   offset   div   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!