intersectionobserver API实现懒加载

2021-09-13 13:30:07 阅读：183 来源： 互联网

标签：target 元素 API ent io entries intersectionobserver path 加载

用法

var io = new IntersectionObserver(callback, option)

参数：
callback参数

time：可见性发生变化的时间，是一个高精度时间戳，单位为毫秒
target：被观察的目标元素，是一个 DOM 节点对象
rootBounds：根元素的矩形区域的信息，getBoundingClientRect()方法的返回值，如果没有根元素（即直接相对于视口滚动），则返回null
boundingClientRect：目标元素的矩形区域的信息
intersectionRect：目标元素与视口（或根元素）的交叉区域的信息
intersectionRatio：目标元素的可见比例，即intersectionRect占boundingClientRect的比例，完全可见时为1，完全不可见时小于等于0

option参数

threshold 属性 threshold: [0, 0.25, 0.5, 0.75, 1] 决定了什么时候触发回调函数。它是一个数组，每个成员都是一个门槛值，默认为[0]
root 属性，rootMargin 属性

基本方法

// 开始观察
io.observe(document.getElementById('example'));
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();

demo
3.1 html

	<div class="box">
        <img alt="" data-original='./image/banner-pic.png'>
        <img data-original="./image/blog-detail-pic.png" alt="">
        <img data-original="./image/michael-strickland.png" alt="">
        <img data-original="./image/pic-02.jpg" alt="">
        <div data-original="./image/renee-hensley.png" class="lastimg">
     </div>

3.2 js

var io = new IntersectionObserver(
  // entries是个数组每个值是个IntersectionObersverEntry对象 ，当有两个元素可见数组长度就是二
                entries => {
                    // console.log(entries);
                    entries.forEach(ent => {
                        if (ent.intersectionRatio > 0) {
                            let path = ent.target.getAttribute('data-original')
                            // 获取标签名
                            // let tName = ent.target.nodeName
                            let tName = ent.target.tagName
                            if (tName == 'IMG') {
                                // ent.target.setAttribute('src',path)
                                ent.target.src = path
                            } else {
                                ent.target.style.backgroundImage = "url(" + path + ")"
                            }
                        }
                    })
                })
            $('[data-original]').each((i, e) => {
                io.observe(e)
            })

标签：target,元素,API,ent,io,entries,intersectionobserver,path,加载
来源： https://blog.csdn.net/qq_39193364/article/details/120265280

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

intersectionobserver API实现懒加载