源码工程下载地址：https://github.com/blff122620/jsLibary/lazyLoad.html
实现原理就是通过scroll事件判断元素是否已经进入viewport
导入
lazyLoad.js
使用
inViewPort(item)即可 判断item是否在视口里，然后继续进行自己的逻辑就行了
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>图片懒加载</title>
<link rel="stylesheet" href="./static/css/reset.css">
<link rel="stylesheet" href="./static/css/global.css">
<style>
.content {
/*height: 1500px;*/
width: 100%;
overflow: hidden;
}
.content>img {
border-radius: 5px;
display: inline-block;
margin: 200px 0 0 200px;
width: 235px;
}
</style>
</head>
<body>
<div class="content bg1" id="js-imgdiv">
<img src="./static/img/lazyDefault.jpg" data-url="./static/img/1.jpg" alt="" >
<img src="./static/img/lazyDefault.jpg" data-url="./static/img/2.jpg" alt="" >
<img src="./static/img/lazyDefault.jpg" data-url="./static/img/3.jpg" alt="" >
<img src="./static/img/lazyDefault.jpg" data-url="./static/img/4.jpg" alt="" >
<img src="./static/img/lazyDefault.jpg" data-url="./static/img/5.jpg" alt="" >
<img src="./static/img/lazyDefault.jpg" data-url="./static/img/6.jpg" alt="" >
</div>
<script type="text/javascript" src="./static/js/util.js"></script>
<script type="text/javascript" src="./static/js/lazyLoad.js"></script>
<script>
(function() {
window.onload=function(){
var pics = $$("#js-imgdiv>img");
setPicSrc(pics);
window.onscroll = function(){
setPicSrc(pics);
};
function setPicSrc(pics){
pics.forEach(function(item){
if(inViewPort(item)){
setTimeout(function(){
item.src = item.dataset.url;
},200);//模拟一下网速慢的情况
};
});
}
};
}());
</script>
</body>
</html>
时间： 2024-10-19 15:46:11