功能-优化图片懒加载

优化api

IntersectionObserver

Intersection Observer API - Web API 接口参考 | MDN

HTML代码

<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />
<img src="./img/0.jpg" />

JS代码

const imgList = document.getElementsByTagName("img");
//判断图片在列表中是第几个
function ifImgIndex(dom){
    for(let i=0;i<imgList.length;i++){
        if(imgList[i] === dom){
            return i;
        }
    }
}
let options = {
    root: null, // 默认根节点是视窗
    rootMargin: "0px", // 根节点的margin
    threshold: 0.1, // 交叉比例
};
let callback =function (entries) {
    entries.forEach((item) => {
        if (item.isIntersecting) {
            let index = ifImgIndex(item.target);
            item.target.src = `./img/${index + 1}.jpg`;
        }
    });
};
var observer = new IntersectionObserver(callback, options);
for(let i=0;i<imgList.length;i++){
    observer.observe(imgList[i]);
}

小知识

IntersectionObserve --api的使用

配置项

let options = {
    root: null, // 默认根节点是视窗
    rootMargin: "0px", // 根节点的margin
    threshold: 0.1, // 交叉比例
};
var observer = new IntersectionObserver(callback, options);

属性含义

isIntersecting --是否交叉

target --交叉元素

Intersection Observer API - Web API 接口参考 | MDN

let callback = function (entries) {
    entries.forEach(item => {
        if (item.isIntersecting) {
            let index = ifImgIndex(item.target);
            item.target.src = `./img/${index + 1}.jpg`;
        }
    });
};