懒加载:判断高度法与IntersectionObserver API法
2021-05-30 01:15
标签:sele char 退出 port += 撰写 query undefined 频繁 感谢阮一峰老师撰写的非常详细的教程 实现的大致预览:
这个方法很容易理解,并且兼容性也不错,但是有一个致命的缺点就是onscroll事件触发的太频繁了,很容易影响页面性能。 因而考虑使用IntersectionObserver,这个api兼容性很差,需要谷歌51+。 懒加载:判断高度法与IntersectionObserver API法 标签:sele char 退出 port += 撰写 query undefined 频繁 原文地址:https://www.cnblogs.com/linbudu/p/11069886.htmlDOCTYPE html>
html lang="en">
head>
meta charset="UTF-8">
meta name="viewport" content="width=device-width, initial-scale=1.0">
meta http-equiv="X-UA-Compatible" content="ie=edge">
title>图片懒加载title>
style>
img {
display: block;
width: 100%;
margin-bottom: 20px;
}
style>
head>
body>
img data-src="img/asher-ward-453238-unsplash.jpg" src="img/asher-ward-453238-unsplash.jpg" alt="">
img data-src="img/asher-ward-453238-unsplash.jpg" src="img/asher-ward-453238-unsplash.jpg" alt="">
img data-src="img/jay-mantri-4033-unsplash.jpg" alt="">
img data-src="img/jp-valery-734900-unsplash.jpg" alt="">
img data-src="img/ryan-searle-345035-unsplash.jpg" alt="">
img data-src="img/thomas-tixtaaz-119883-unsplash.jpg" alt="">
body>
html>
//使用交叉观察器进行实现 IntersectionObserver API
var observer = new IntersectionObserver(
function visible(eles){
eles.forEach(function(ele){
ele.target.src = ele.target.getAttribute(‘data-src‘);//注意这里的ele是观察器对象,ele.target才是被观察的元素
console.log(ele.target);
// observer.unobserve(this);//取消观察
})
},{
threshold:[0,0.1],//可见比例达到...时触发观察器的回调函数
// root:document.documentElement//当元素在容器内滚动时的设定
});
//observe的参数是一个 DOM 节点对象。如果要观察多个节点,就要多次调用这个方法。
//也就是说,不能使用document.querySelector(‘img‘)
//这里参考了阮一峰老师的教程
function query(selector){
return Array.from(document.querySelectorAll(selector));
};
query(‘img‘).forEach(function(item){
observer.observe(item);
})
//IntersectionObserver API 是异步的,不随着目标元素的滚动同步触发。
// 规格写明,IntersectionObserver的实现,应该采用requestIdleCallback(),
// 即只有线程空闲下来,才会执行观察器。这意味着,这个观察器的优先级非常低,只在其他任务执行完,浏览器有了空闲才会执行。
文章标题:懒加载:判断高度法与IntersectionObserver API法
文章链接:http://soscw.com/essay/89338.html