intersectionObserver是一个实用的web api，可以用来监控指定元素和视窗有交互时发生的回调，说白了就是当页面里的某个元素进入浏览器屏幕或者离开时候你想干嘛，这个特性极适合实现懒加载(也可以监听页面scroll事件，这是另一种方法)。
给所有的图片一个data-src保存图片真正的链接
var img = document.querySelectorAll('[data-src]')
var iso=new IntersectionObserver(callfn)
function callfn(entries){
entries.forEach((item)=>{
if(item.isIntersecting){
item.target.src=item.target.dataset.src
iso.unobserve(item.target)
}
})
}
imgs.forEach((item)=>{
iso.observe(item)
})
intersectionObserver是一个实用的web api，可以用来监控指定元素和视窗有交互时发生的回调，...
IntersectionObserver 监听元素是否出现或离开可视区域， 实现图片懒加载 Intersectio...
前端开发过程中，为了丰富页面的表现力，总是需要插入各种各样的图片。但是图片过多，会给页面显示性能带来一些影响。 传...
一、简述图片懒加载的实现原理 图片懒加载 若一开始，页面上有许多的图片要加载，而如果同时加载这么多图片，会消耗性能...
使用场景 一般来说，浏览器中的图片都是在加载的时候全部准备完毕呈现给我们，但是往往浏览器中的一些图片，我们并不需要...
图片懒加载的原理是什么？ 首先明白为什么要懒加载： 懒加载即延迟，对于图片过多的页面，为了加快页面加载速度，我们需...
一、懒加载 懒加载也叫延迟加载，Js中图片的延迟加载，延迟图片需要符合某些条件时才加载；对于图片过多的页面，为了加...
懒加载原理 传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClien...
懒加载思路及实现 实现懒加载有四个步骤，如下：1.加载loading图片2.判断哪些图片要加载【重点】3.隐形加载...
本文标题：关于intersectionObserver实现页面图片懒加载
本文链接：https://www.haomeiwen.com/subject/fdsofhtx.html
网友评论