js图片懒加载

1.什么是图片懒加载？

懒加载也就是延迟加载。

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图）。
只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。

2.为什么要使用懒加载？

很多页面，内容很丰富，页面很长，图片较多。比如说各种商城页面。这些页面图片数量多，而且比较大，少说百来K，多则上兆。

要是页面载入就一次性加载完毕，需要耗时很久很久。

3.懒加载的原理是什么？

页面中的img元素，如果没有src属性，浏览器就不会发出请求去下载图片，

只有通过javascript设置了图片路径，浏览器才会发送请求。

懒加载的原理就是先在页面中把所有的图片统一使用一张占位图进行占位，

把真正的路径存在元素的“data-url”（这个名字起个自己认识好记的就行）属性里，要用的时候就取出来，再设置；

4.懒加载如何实现？

（1)首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中。

（2)页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中。

（3)在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中。

5.懒加载的优点是什么？

页面加载速度快、可以减轻服务器的压力、节约了流量,提升用户体验。

6.懒加载实现方法

方式一：(演示地址)
元素距顶部的高度 - 页面被卷去的高度 <= 浏览器可视区的高度)

来判断是否符合我们想要的条件.需要实时监听页面滚动时图片的高度变化

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

<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Fish's Demo - 图片懒加载</title>
    <style>
        html,
        body {
            min-height: 100vh;
            width: 100%;
            overflow: auto;
            padding-top: 28px;
            background-color: #f2f4f8;
        }
        
        .container {
            width: 100%;
            overflow: auto;
        }
        
        img {
            margin: auto;
            display: block;
            width: 500px;
            height: 500px;
            margin-bottom: 100px;
        }
    </style>
    <script>
        window.onload = function() {
            var image = [].slice.call(document.querySelectorAll("img"), 0);
            var viewHeight = window.innerHeight;
            image.forEach(function(img) {
                var imgFromTop = img.offsetTop; // 图片的距顶部的高度
                let loading = false

                function scrollFn() {
                    if (loading) return
                    if (imgFromTop - window.pageYOffset <= viewHeight) { // 当图片距顶高度减去滚动高度小于或等于视窗高度时，替换正式图片路径
                        loading = true
                        setTimeout(() => {
                            img.src = img.dataset.src;
                        }, 500);
                        img.onload = () => {
                            loading = false
                            window.removeEventListener("scroll", scrollFn);
                        }
                        img.error = () => {
                            loading = false
                        }
                    }
                }
                window.addEventListener("scroll", scrollFn);
                scrollFn()
            })
        };
    </script>
</head>

<body>
    <div class="container">
        <img data-src="https://demo.zowlsat.com/demo/img/1.png" src="https://demo.zowlsat.com/demo/img/loading3.gif" alt="" />
        <img data-src="https://demo.zowlsat.com/demo/img/2.png" src="https://demo.zowlsat.com/demo/img/loading3.gif" alt="" />
        <img data-src="https://demo.zowlsat.com/demo/img/3.png" src="https://demo.zowlsat.com/demo/img/loading3.gif" alt="" />
        <img data-src="https://demo.zowlsat.com/demo/img/4.png" src="https://demo.zowlsat.com/demo/img/loading3.gif" alt="" />
        <img data-src="https://demo.zowlsat.com/demo/img/5.png" src="https://demo.zowlsat.com/demo/img/loading3.gif" alt="" />
    </div>
    </div>
</body>

</html>

文章目录