图片懒加载

最新推荐文章于 2025-06-13 11:21:22 发布

转载最新推荐文章于 2025-06-13 11:21:22 发布 · 170 阅读

javascript 专栏收录该内容

39 篇文章

订阅专栏

本文介绍了一种使用JavaScript实现的图片懒加载技术，通过监听页面滚动事件动态加载图片资源，有效提高网页加载速度，优化用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="./jquery-3.2.1.min.js"></script>
<style>
ul>li{
display: block;
width: 800px;
height: 100px;
background-color: red;
}
</style>
</head>

<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
<img class="imgLazyLoad" data-src="http://office.qq.com/images/title.jpg" />
<img class="imgLazyLoad" data-src="http://www.0101shop.com/Promotion/2017/2017June/0_03.jpg">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
<script>
(function(){//立即执行函数
let imgList = [],delay,time = 250,offset = 0;
function _delay(){//函数节流
clearTimeout(delay);
delay = setTimeout(() => {
_loadImg();
},time)
};
function _loadImg(){//执行图片加载
for(let i = 0,len = imgList.length; i < len; i++){
if(_isShow(imgList[i])){
imgList[i].src = imgList[i].getAttribute('data-src');
console.log(imgList)
imgList.splice(i,1);
console.log(imgList)
}
}
};
function _isShow(el){//判断img是否出现在可视窗口
let coords = el.getBoundingClientRect();//获取元素在页面上的位置
return (coords.left >= 0 && coords.left >= 0 && coords.top) <= (document.documentElement.clientHeight || window.innerHeight) + parseInt(offset);
};
function imgLoad(selector){//获取所有需要实现懒加载图片对象引用并设置window监听事件scroll
_selector = selector || '.imgLazyLoad';
let nodes = document.querySelectorAll(selector);
imgList = Array.apply(null,nodes);
window.addEventListener('scroll',_delay,false)//执行节流阀事件
};
imgLoad('.imgLazyLoad')
})()

</script>

</html>