<body>
//src用一个小图片 data-src存入一个真实图片路径
<img src="../img/p.jpg" data-src="../img/index.gif">
</body>
<script type="text/javascript">
lazyRender();//先检查一进来的页面有没有img标签
var clock;//定义一个时间计时事件
$(window).on('scroll',function(){
//如果计时事件存在则清除
if(clock){
clearTimeout(clock)
}
//给计时事件重新赋值
clock = setTimeout(function(){
lazyRender()
},300)
})
function lazyRender(){
$("body img").each(function(){
if(checkShow(this) && !isLoaded(this)){
lazyLoad(this);
}
})
}
//检查元素是否出现在可视区域内
function checkShow(_this){
var height = $(window).height();//浏览器可视区域高度
var scrollHeight = $(document).scrollTop();//滚动条距离顶部距离
var elemHeight = $(_this).offset().top;//元素距离顶部的距离
if(elemHeight - scrollHeight <height) {
return true;
}
return false;
}
//检查元素是否已经被加载过
function isLoaded(_this){
return $(_this).attr('src') == $(_this).data('src');
}
//加载真实图片
function lazyLoad(_this){
$(_this).attr('src',$(_this).data('src'));
}
</script>
jq实现图片懒加载
最新推荐文章于 2024-05-17 14:04:51 发布
1732
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
