如果用户还没看到网页下面的内容,没有必要这么快加载这些看不到的图片,实现只有滚动到网页下面才能预览,看不到图片
方法一
事件监听,监听scroll事件,鼠标滚动就触发
需要知道:
窗口显示区的高度:window.innerHeight、
图片到视图上边的距离(高度):getBoundingClientRect().top
如果图片还未能看到,即图片距离距离视图顶部的距离大于窗口显示区的高度
如果图片可以看到,即图片距离距离视图顶部的距离小于窗口显示区的高度
<img data-src="1.jpg"> <img data-src="2.jpg"> <img data-src="3.jpg">const images = document.querySelectorAll('img') window.addEventListener('scroll',(e)=>{ images.forEach(image=>{ const imageTop = image.getBoundingClientRect().top if(imageTop < window.innerHeight){ const data_src = image.getAttribute("data-src") image.setAttribute('src',data_src) } //缺点: //如果图片较多,scroll会触发太多次 //页面需要加载很多内容就会导致任务的堆积 //而且即使图片已经加载了还是会不断触发事件,非常消耗资源 console.log('scroll触发') }) })
自定义属性:data-*
浏览器碰到这个属性的时候是不会像默认属性那样进行属性处理的
eg.
这样就相当于不知道要在哪里下载这些图片了
自定义属性赋值给原本src属性
var image = document.querySelectorAll('img')[0] var data_src = image.getAttribute("data-src") image.setAttribute('src',data_src)
方法二
intersectionObserver(交叉观察)
目标元素和可视窗口会产生交叉区域,交叉区域发生什么事情,执行什么程序
intersectionObserve是浏览器提供的构造函数,可以直接拿来使用,需要浏览器兼容性
cosnt observer = new IntersectionObserver(callback) //参数是一个回调函数 /* 回调函数一般触发两次: 目标元素看见了触发一次; 目标元素看不见了又触发一次; 回调函数会接收一个参数(数组) isIntersecting:(是否交叉)判断该次触发回调函数时是否已经观察到了图片 图片未滚动到可视区域:false,滚动到:true */ /* 图片加载后取消回调函数的触发,即直接取消observer实例这个观察动作 */ observer.observe(DOM节点) //开始 observer.unobserver(DOM节点) //取消的动作(方法) /* 优点: 不用进行不断观察,因为图片已经被加载出来,一般就没必要观察了 */
const images = document.querySelectorAll('img') const callback = entries =>{ entries.forEach(entry =>{ if(entey.isIntersecting){ //target属性指的是目标元素-->判断回调函数是属于哪个元素 const image = entry.target const data_src = image.getAttribute('data-src'); image.setAttribute('src',data_src); observer.unobserve(image); console.log('触发') } }) } const observer = new IntersectionObserver(callback); images.forEach(image=>{ observer.observe(image) })
方法三:
// 图片懒加载
const images = document.querySelectorAll("img");
const callback = entries => {
entries.forEach(entry => {
if (entry.isIntersecting) {
const image = entry.target;
const data_src = image.getAttribute("data-src");
image.setAttribute("src", data_src);
observer.unobserve(image);
console.log("触发");
};
});
};
const observer = new IntersectionObserver(callback);
images.forEach(image => {
observer.observe(image);
});