jQuey懒加载

最新推荐文章于 2024-07-23 03:58:13 发布

原创最新推荐文章于 2024-07-23 03:58:13 发布 · 320 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#懒加载

jquery 专栏收录该内容

2 篇文章

订阅专栏

懒加载很实用，其中的逻辑关系也比较简单，这里总结一个我所写的jquery懒加载例题。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>懒加载-例题</title>
<script type="text/javascript" src="../jQuery/jquery-1.8.3.min.js"></script>
</head>
<style type="text/css">
ul{
margin-left:80px;
padding:0;
list-style: none;
}
li{
float:left;
}
ul li img{
width:400px;
height:400px;
}
</style>
<body>
<ul>
<li><img src="" data-src="images/18.jpg"></li>
<li><img src="" data-src="images/19.jpg"></li>
<li><img src="" data-src="images/20.jpg"></li>
<li><img src="" data-src="images/21.jpg"></li>
<li><img src="" data-src="images/22.jpg"></li>
<li><img src="" data-src="images/23.jpg"></li>
<li><img src="" data-src="images/24.jpg"></li>
<li><img src="" data-src="images/25.jpg"></li>
<li><img src="" data-src="images/100.jpg"></li>
<li><img src="" data-src="images/101.jpg"></li>
<li><img src="" data-src="images/102.jpg"></li>
<li><img src="" data-src="images/103.jpg"></li>
<li><img src="" data-src="images/104.jpg"></li>
<li><img src="" data-src="images/105.jpg"></li>
<li><img src="" data-src="images/106.jpg"></li>
<li><img src="" data-src="images/107.jpg"></li>
</ul>
</body>
<script type="text/javascript">
$(function(){
panduan();
$(window).on("scroll",function(){
panduan();
})
function panduan(){
$("ul li img").each(function(){
if(checkShow($(this)) && !isLoaded($(this))){
loadImg($(this));
}
})
}
function checkShow($img){
var scrollTop=$(window).scrollTop();//页面向上滚动的距离
var windowHeight=$(window).height();//浏览器自身高度
var offsetTop=$img.offset().top;//图片距离document顶部的距离
if(offsetTop<(scrollTop+windowHeight) && offsetTop>scrollTop){
return true;
}else{
return false;
}
}
function isLoaded($img){//若，data-src===src则图片已经被加载完成。
return $img.attr('data-src')===$img.attr('src');
}
function loadImg($img){//执行操作，将data-src的值付给src
$img.attr('src',$img.attr('data-src'));
}
})
</script>
</html>