js实现图片懒加载原理
原理
图片懒加载是前端页面优化的一种方式，在页面中有很多图片的时候，图片加载就需要很多时间，很耗费服务器性能，不仅影响渲染速度还会浪费带宽，为了解决这个问题，提高用户体验，所以就出现了懒加载这种方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。
实现
思路：在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。图片的真实地址需要存储在data-src中。
图片没有进入可视区域，也就是说图片的offsetTop需要小于页面的可视高度，但想一想，当图片在页面的下方的时候呢，需要页面滚动了一段距离之后才能看到图片，所以这里需要满足img.scrollTop < 页面的可视区域高度+页面滚动的高度，这里是实现图片懒加载的关键，接下来看具体代码的实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<style>
img {
width: 100%;
vertical-align: top;
height: 400px;
}
</style>
<body style="margin-bottom: 500px">
<img
src=""
data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
/>
<img
src=""
data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
/>
<img
src=""
data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
/>
<img
src=""
data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
/>
<img
src=""
data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
/>
<img
src=""
data-src="https://t7.baidu.com/it/u=1595072465,3644073269&fm=193&f=GIF"
/>
</body>
<script>
let imgArr = Array.from(document.querySelectorAll("img"));
let n = 0;
let lazyload = function () {
for (let i = n; i < imgArr.length; i++) {
console.log(imgArr[i].offsetTop);
if (
imgArr[i].offsetTop <
document.documentElement.scrollTop + window.innerHeight
) {
imgArr[i].src = "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zcool.cn%2Fcommunity%2F0196fa582abab6a84a0d304f899eaf.gif&refer=http%3A%2F%2Fimg.zcool.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1653232363&t=49d21374861e863de3d07fc0daee390c";
let img = new Image();
img.onload = () => {
imgArr[i].src = imgArr[i].dataset.src;
}
img.src = imgArr[i].dataset.src;
n = i + 1;
}
}
};
function _throttle(fn, interval) {
var last;
var timer;
var interval = interval || 200;
return function () {
var th = this;
var args = arguments;
var now = new Date();
if (last && now - last < interval) {
clearTimeout(timer);
timer = setTimeout(function () {
last = now;
fn.apply(th, args);
}, interval);
} else {
last = now;
fn.apply(th, args);
}
}
}
window.addEventListener("scroll", _throttle(lazyload,1000));
lazyload();
</script>
</html>正文到此结束
相关文章
热门推荐
评论插件初始化中...