js IntersectionObserver的学习, 图片懒加载的简单实现

我心飞翔 分类:javascript

在平时开发的时候可能需要到一些效果,比如图片的懒加载,也能提高页面的性能

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本</title>
    <style>
        div>ul>li>img{
            width: 300px;
            height: 300px;
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <div>
        <ul>
           <li>
                <img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" alt="">
            </li>
            <li>
                <img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" alt="">
            </li>
            <li>
                <img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" alt="">
            </li>
            <li>
                <img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" alt="">
            </li>
            <li>
                <img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" alt="">
            </li>
            <li>
                <img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" alt="">
            </li>
            <li>
                <img src="https://sf3-scmcdn2-tos.pstatp.com/xitu_juejin_web/img/logo.a7995ad.svg" alt="">
            </li>
        </ul>
    </div>
</body>
window.onload = function (){
    const imgs = document.querySelectorAll('img')
    lazyImg(imgs)
}
const lazyImg = (imgs) => {
    const io =  new IntersectionObserver((entries,observes)=>{
        entries.forEach(entry=>{
            if(entry.isIntersecting){
                const img = entry.target
                img.setAttribute('src',img.dataset.src)
                img.onload = img.onerror = () => io.unobserve(img)
            }
        })
    })
    imgs.forEach(item=>{
        io.observe(item)
    })
}
</script>
上面是一个简单的实现,我们仔细来分析一下
 

用到Intersection Observer API

const observer = new IntersectionObserver(callback, options);
接收一个回调函数,和一个配置项。
callback 有以下api
let callback =(entries, observer) => {
  entries.forEach(entry => {
    // Each entry describes an intersection change for one observed
    //   entry.boundingClientRect 
    // 返回包含目标元素的边界信息的 DOMRectReadOnly
    //   entry.intersectionRatio
    //   entry.intersectionRect
    //   entry.isIntersecting
    //   entry.rootBounds  
    //   entry.target  // 当前元素
    //   entry.time
    详细参见MDN[:](https://developer.mozilla.org/zh-CN/docs/Web/API/IntersectionObserverEntry)
  });
};
let option = {
root: null,   // 如果未指定或者为null,则默认为浏览器视窗。
rootMargin: '0px 0px 0px 0px', //一个在计算交叉值时添加至根的边界盒(bounding_box)中的一组偏移量,
类型为字符串(string) ,
可以有效的缩小或扩大根的判定范围从而满足计算需要
threshold: 0.0 // 规定了一个监听目标与边界盒交叉区域的比例值,可以是一个具体的数值或是一组0.0到1.0之间的数组
}

以上均为MDN解释。
 

回复

我来回复
  • 暂无回复内容