js——实现图片懒加载

最新推荐文章于 2024-07-23 16:39:50 发布

Tyche_ya

最新推荐文章于 2024-07-23 16:39:50 发布

阅读量293

点赞数

文章标签： javascript 前端

本文链接：https://blog.csdn.net/Tyche_ya/article/details/128944900

版权

懒加载技术能提升网页性能，通过获取屏幕可视区高度和滚动位置，判断图片是否进入可视区域再加载。这样可以避免一次性加载所有内容影响用户体验和浪费用户流量。文章通过示例代码解释了如何利用JavaScript实现这一功能。

摘要由CSDN通过智能技术生成

懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域再加载。

一、为什么要实现懒加载

1、全部加载的话会影响用户体验
2、浪费用户的流量，有些用户并不想全部看完，全部加载会耗费大量流量

二、实现步骤

1、document.documentElement.clientHeight / /获取屏幕可视区的高度

这个属性是只读属性，对于没有定义css或者内联布局盒子的元素为0，否则，它是元素内部的高度（单位像素），包含内边距，但不包括水平滚动条，边框和外边框。

2、document.documentElement.scrollTop / /获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离

Element.scrollTop属性可以获取或设置一个元素的内容垂直滚动的像素数。
一个元素的scrollTop值是这个元素的顶部到视口可见内容（的顶部）的距离的度量。当一个元素的内容没有产生垂直方向的滚动条，那么它的scrollTop值为0.

3、element.offsetTop / /获取元素相对文档顶部的高度

HTMLElement.offsetTop为只读属性，它返回当前元素相对于其offsetParent元素的顶部的距离。

可以看出要是scrollTop+cliHeight > offsetTop的时候就进入了可视区域，就会被请求。

html:

   <style>
        img {
            display: flex;
            margin-bottom: 20px;
            width: 350px;
            height: 450px;
        }
    </style>
    
        <img src="../lazy/images/loading.jpg" data-src="../lazy/images/1.jpg" alt="">
        <img src="../lazy/images/loading.jpg" data-src="../lazy/images/2.jpg" alt="">
        <img src="../lazy/images/loading.jpg" data-src="../lazy/images/3.jpg" alt="">
        <img src="../lazy/images/loading.jpg" data-src="../lazy/images/4.jpg" alt="">
        <img src="../lazy/images/loading.jpg" data-src="../lazy/images/5.jpg" alt="">
        <img src="../lazy/images/loading.jpg" data-src="../lazy/images/6.jpg" alt="">
        <img src="../lazy/images/loading.jpg" data-src="../lazy/images/7.jpg" alt="">
        <img src="../lazy/images/loading.jpg" data-src="../lazy/images/8.jpg" alt="">
        <img src="../lazy/images/loading.jpg" data-src="../lazy/images/9.jpg" alt="">

js:

        let imgNum = document.getElementsByTagName('img').length; // 获取img标签的长度
        let img = document.getElementsByTagName('img'); // 获取img所有标签
        let n = 0; // 计数器
        lazyLoad();
        window.onscroll = lazyLoad;

        function lazyLoad() {
            let seeHeight = document.documentElement.clientHeight; // 获取用户视口的高度
            let scrollHeight = document.documentElement.scrollTop || document.body.scrollTop //获取滚动条的高度
            for (i = n; i < imgNum; i++) {
                if (img[i].offsetTop < seeHeight + scrollHeight) {
                    if (img[i].getAttribute('src') == '../lazy/images/loading.jpg') {
                        img[i].src = img[i].getAttribute('data-src');
                    }
                    n = i + 1; //防止重复加载
                }
            }
        }