1,使用懒加载,未出现在页面的图片等到出现在页面再进行加载出来
// html
// data-src 自定义属性
// js
var images = document.querySelectorAll(‘img’);
// images.forEach((image)=>{
// let imgtop = image.getBoundingClientRect().top();
// if(imgtop<window.innerHeight){
// let dataSrc = image.getAttribute(‘data-src’);
// image.setAttribute(‘src’,dataSrc);
// }
// })
let callback =(entries)=>{
entries.forEach(entry=>{
if(entry.isIntersection){
const image = entries.target;
let dataSrc = image.getAttribute(‘data-src’);
image.setAttribute(‘src’,dataSrc);
observer.unobserve();
}
})
}
// IntersectionObserver 浏览器构造函数
let observer = new IntersectionObserver(callback);
images.forEach(image=>{
observer.observe(image)
})
2,使用工具将图片进行无