原生js图片懒加载
2023-02-15 本文已影响0人
靴唯白
前言
- 什么场景下用到懒加载？
答：当一个页面上有很多图片，加载图片的时候占比时间长，造成页面渲染堵塞，用户体验差，这个时候就需要用到懒加载。 - 懒加载的原理是什么？
答：懒加载的原理就是判断当前图片是否在视口内显示，显示的时候让图片真实地址替换加载图片。
最后实现的效果
首次加载
滚动条滚动监听加载
CSS部分
<style>
img {
height: 200px;
margin-bottom: 10px;
display: block;
}
</style>
body 部分(自己找两张图片，一张预放的加载图片，另外一张我放的刘亦菲的图片)
<body>
<img src="./load.gif" data-src="./lyf.webp" alt="">
<img src="./load.gif" data-src="./lyf.webp" alt="">
<img src="./load.gif" data-src="./lyf.webp" alt="">
<img src="./load.gif" data-src="./lyf.webp" alt="">
<img src="./load.gif" data-src="./lyf.webp" alt="">
<img src="./load.gif" data-src="./lyf.webp" alt="">
<img src="./load.gif" data-src="./lyf.webp" alt="">
<img src="./load.gif" data-src="./lyf.webp" alt="">
<img src="./load.gif" data-src="./lyf.webp" alt="">
<img src="./load.gif" data-src="./lyf.webp" alt="">
<img src="./load.gif" data-src="./lyf.webp" alt="">
<img src="./load.gif" data-src="./lyf.webp" alt="">
</body>
script部分(懒加载的3种方法)
- 判断元素距离顶部的高度是否小于视口高度 + 滚动条高度
// 获取所有图片元素数组
let imgs = document.querySelectorAll("img");
// 声明一个变量用来存放上一次懒加载到哪一步了
let n = 0;
// 首次页面进来的时候需要渲染一遍
lazyLoad();
function lazyLoad() {
let w = document.documentElement.clientHeight; // 视口高度 可见区域
let s = document.documentElement.scrollTop || document.body.scrollTop; // 获取滚动条的滚动距离
// 循环图片
for (let i = n; i < imgs.length; i++) {
if (imgs[i].offsetTop < w + s) {
// 用真实图片地址替换之前的加载图片
imgs[i].src = imgs[i].dataset.src
imgs[i].removeAttribute('data-src')
// 为了防止重复加载
n = i + 1;
}
}
}
window.addEventListener("scroll", lazyLoad);
- 判断元素距离窗口的高度是否小于窗口的高度 getBoundingClientRect().top 为元素相对于窗口的位置；window.innerHeight 为当前窗口的高度
// 获取所有图片元素数组
let imgs = document.querySelectorAll("img");
// 声明一个变量用来存放上一次懒加载到哪一步了
let n = 0;
// 首次页面进来的时候需要渲染一遍
lazyLoad();
function lazyLoad() {
for (let i = n; i < imgs.length; i++) {
if (imgs[i].getBoundingClientRect().top < window.innerHeight) {
if (imgs[i].getAttribute("src").includes("load.gif")) {
imgs[i].src = imgs[i].dataset.src
imgs[i].removeAttribute('data-src')
n = i + 1;
}
}
}
}
window.addEventListener("scroll", lazyLoad);
- 其实上面两种方式已经大致实现懒加载，但是，它们都有一个缺点，就是一当发生滚动事件时，就发生了大量的循环和判断操作判断图片是否可视区里。这自然是不太好的，那是否有解决方法。这里就引入了一个叫 Intersection Observer 观察器接口，它是是浏览器原生提供的构造函数，使用它能省到大量的循环和判断。当然它的兼容可能不太好，看情况使用。
// 替换方案 IntersectionObserver
function imgObserver() {
let observer = new IntersectionObserver((entries) => {
entries.forEach((entrie) => {
if (entrie.isIntersecting) {
let img = entrie.target;
img.src = img.dataset.src
img.removeAttribute('data-src')
observer.unobserve(img);
}
});
});
imgs.forEach((img) => {
observer.observe(img);
});
}
imgObserver()
document.addEventListener("scroll", imgObserver);
</script>
