图片懒加载 #28

h476564406 · 2019-03-10T10:40:49Z

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<!-- https://developers.google.com -->

<body>
    <style>
        img {
            width: 600px;
            height: 300px;
        }
    </style>
    <!-- dataset根据屏幕密度现实对应尺寸图片 -->
    <img class="lazy" data-src="http://s15.sinaimg.cn/mw690/0064mebigy6Slwf8V664e&690" alt="">
    <img class="lazy" data-src="http://img1.imgtn.bdimg.com/it/u=3271719454,2648771935&fm=11&gp=0.jpg" alt="">
    <img class="lazy" data-src="http://img1.imgtn.bdimg.com/it/u=1435454177,1464304214&fm=11&gp=0.jpg" alt="">
    <img class="lazy" data-src="http://img5.imgtn.bdimg.com/it/u=2134049,3304289214&fm=11&gp=0.jpg" alt="">
    <img class="lazy" data-src="http://img4.imgtn.bdimg.com/it/u=1506023106,3055417970&fm=200&gp=0.jpg" alt="">
    <img class="lazy" data-src="http://img3.imgtn.bdimg.com/it/u=3765235807,1657089528&fm=200&gp=0.jpg" alt="">
    <img class="lazy" data-src="http://img2.imgtn.bdimg.com/it/u=2804139329,4123084849&fm=200&gp=0.jpg" alt="">
    <img class="lazy" data-src="http://img1.imgtn.bdimg.com/it/u=3511062383,3040299576&fm=200&gp=0.jpg" alt="">
    <img class="lazy" data-src="http://img1.imgtn.bdimg.com/it/u=3511062383,3040299576&fm=200&gp=0.jpg" alt="">
    <img class="lazy" data-src="http://img1.imgtn.bdimg.com/it/u=3511062383,3040299576&fm=200&gp=0.jpg" alt="">
    <img class="lazy" data-src="http://img1.imgtn.bdimg.com/it/u=3511062383,3040299576&fm=200&gp=0.jpg" alt="">

    <script>
        document.addEventListener('DOMContentLoaded', function () {
            let lazyImages = Array.from(document.querySelectorAll('img.lazy'));

            if ("IntersectionObserver" in window) {
                // entries所有被观测的对象
                // 你注册的回调函数将会在主线程中被执行。所以该函数执行速度要尽可能的快。
                let lazyImageObserver = new IntersectionObserver(function (entries, observer) {
                    entries.forEach(function (entry, index) {
                        if (entry.isIntersecting) {
                            let lazyImage = entry.target;
                            // 通过 CSS background-image 属性（以及其他属性）来调用图像。 
                            // 与加载时不考虑可见性的 <img> 元素不同，CSS 中的图像加载行为是建立在更多的推测之上。 
                            // 构建文档和 CSS 对象模型以及渲染树后，浏览器会先检查 CSS 以何种方式应用于文档，再请求外部资源。
                            // lazyImage.classList.add("visible");
                            lazyImage.src = lazyImage.dataset.src;
                            lazyImage.classList.remove('lazy');
                            lazyImageObserver.unobserve(lazyImage);
                        }
                    });
                });

                lazyImages.forEach(function (lazyImage) {
                    lazyImageObserver.observe(lazyImage);
                });

            } else {
                let active = false;

                // 节流
                const lazyLoad = function () {
                    if (active === false) {
                        active = true;

                        // 观测所有的lazyImage是否进入视口
                        setTimeout(function () {
                            lazyImages.forEach(function (lazyImage) {
                                console.log('lazyImage.getBoundingClientRect()', lazyImage.getBoundingClientRect());
                                // window.innerHeight 浏览器窗口的视口（viewport）高度（以像素为单位, 会随用户放大，缩小窗口而改变）；
                                // 如果有水平滚动条，也包括滚动条高度。
                                if ((lazyImage.getBoundingClientRect().top <= window.innerHeight &&
                                    lazyImage.getBoundingClientRect().bottom >= 0) &&
                                    getComputedStyle(lazyImage).display !== "none") {
                                    lazyImage.src = lazyImage.dataset.src;
                                    lazyImage.classList.remove("lazy");
                                    // 只留下未加载的图片
                                    lazyImages = lazyImages.filter(function (image) {
                                        return image !== lazyImage;
                                    });

                                    // 如果全部加载完毕，撤出监听
                                    if (lazyImages.length === 0) {
                                        document.removeEventListener("scroll", lazyLoad);
                                        window.removeEventListener("resize", lazyLoad);
                                        window.removeEventListener("orientationchange", lazyLoad);
                                    }
                                }
                            });

                            active = false;
                        }, 200);
                    }
                }


                document.addEventListener('scroll', lazyLoad);
                window.addEventListener('resize', lazyLoad);
                window.addEventListener('orientationchange', lazyLoad);
            }
        })

        // getBoundingClientRect
        // top left 图片左上点，离视窗（0， 0）的距离
        // bottom right 图片右下点，离视窗（0， 0）的距离
        // top <= window.innerHeight 保证图片在视窗最下点的上面， bottom > 0 保证图片在视窗最上点下面
        // x 图片最左点，距离视窗（0， 0）的距离
        // y 图片最上点，距离视窗（0， 0）的距离
    </script>
</body>

</html>

The text was updated successfully, but these errors were encountered:

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

图片懒加载 #28

图片懒加载 #28

h476564406 commented Mar 10, 2019

图片懒加载 #28

图片懒加载 #28

Comments

h476564406 commented Mar 10, 2019