js-challenges 图片懒加载

Nov 03 '22 08:11 Sunny-117

const images = document.querySelectorAll("image");
const observer = new IntersectionObserver((entries, observer) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.src = entry.target.dataset.src;
      observer.unobserve(entry.target);
    }
  });
});
images.forEach((image) => {
  observer.observe(image);
});

Feb 20 '23 14:02 bearki99

补充：react可以直接用<LazyLoad>组件

Feb 20 '23 14:02 bearki99

const images = document.querySelectorAll("img")

const observer = new IntersectionObserver(entries => {
    entries.forEach(entry => {
        // 判断当前元素是否可见
        if (entry.isIntersecting) {
            // 创建一个自定义属性data-src存放真正要显示的图片路径，原本img自带的src放一张默认图片
            const img = entry.target
            const data_src = img.getAttribute('data-src')
            img.setAttribute('src', data_src)
            // 解除观察，有几张图片就触发几次
            observer.unobserve(img)
        }
    })
})

images.forEach(image => {
    // 对每一个图片对象进行观察
    observer.observe(image)
})

Feb 22 '23 02:02 vuemenow

两种方式
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    img {
        width: 200px;
        height: 200px;
        margin: 160px 60px;
        display: block;
    }
</style>

<body>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>
    <p>1</p>

    <img data-src="./img/1.jpg" src="">
    <img data-src="./img/2.jpg" src="">
    <img data-src="./img/3.jpg" src="">
    <img data-src="./img/6.jpg" src="">
    <img data-src="./img/5.jpg" src="">
</body>
<script src="./函数防抖.js"></script>
<script>
    let img = document.querySelectorAll('img')
    // function s() {
    //     img.forEach((e) => {
    //         let top = e.getBoundingClientRect().top
    //         if (top < window.innerHeight) {
    //             let src = e.getAttribute('data-src')
    //             e.setAttribute('src', src)
    //         }
    //     })
    // }
    // let lazy = devounce2(s, 500)
    // window.onscroll = lazy

    function callback() {
        const cb = (entries) => {
            entries.forEach((a) => {
                if (a.isIntersecting) {
                    //进入视口
                    /*
                    - boundingClientRect: 被观察元素的矩形区域信息。
                    - intersectionRatio: 被观察元素的可见部分与整个元素的比例。
                    - intersectionRect: 可见部分的矩形区域信息。
                    - isIntersecting: 布尔值，表示元素是否与根元素相交。
                    - rootBounds: 根元素的矩形区域信息。
                    - target: 被观察的目标元素。
                    - time: 触发回调的时间戳。
                    */
                    const imge = a.target
                    let src = imge.getAttribute('data-src')
                    imge.setAttribute('src', src)
                    observer.unobserve(imge)
                }
            })
        }
        const observer = new IntersectionObserver(cb, {
            root: null, //具体容器，如果null则默认整个窗口
            rootMargin: '20px',
            threshold: 0//交叉比例
        });
        img.forEach((e) => {
            observer.observe(e)
        })
    }
    callback()

</script>

</html>

Oct 13 '24 08:10 dizao006