图片懒加载的实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
             500px;
            height: 500px;
            border: 1px solid orange;
            display: flex;
            flex-direction: column;
            align-items: center;
            overflow: scroll;
        }

        img {
             300px;
            height: 300px;
            opacity: 0;
            transition: opacity .6s linear;
        }
        .fade{
            opacity: 1;
        }
    </style>
</head>

<body>
    <div class="box">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
        <img data-src="https://feed-image.baidu.com/0/pic/1f8728565d98b8747c6c9bfcf5bf1982.jpg" alt="" srcset="">
    </div>
    <script>
        let box = document.querySelector('.box')  //最外层的容器
        let imgs = document.querySelectorAll('img')  //要监听的元素
        const options = {
            root: box,    //外层元素
            threshold: 0.1   
        }

        function lazyload(target) {
            const io = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target
                        const src = img.getAttribute('data-src')
                        img.setAttribute('src', src)
                        img.classList.add('fade')
                        observer.disconnect()
                    }
                })
            }, options)
            io.observe(target)
        }
        imgs.forEach(lazyload)
    </script>
</body>

</html>
图片懒加载的实现

相关推荐
