图片懒加载

最新推荐文章于 2024-04-10 10:34:13 发布

Float544

最新推荐文章于 2024-04-10 10:34:13 发布

阅读量99

点赞数

分类专栏：学习心得文章标签： javascript

本文链接：https://blog.csdn.net/qq_56392992/article/details/123962917

版权

学习心得专栏收录该内容

162 篇文章 0 订阅

订阅专栏

为什么要进行图片懒加载
对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，严重影响的页面的加载速度.
所以对于图片过多的页面，为了加速页面加载速度。对于未在页面中出现的图片我们先不做加载，而是等滚动到可视区域后再去加载。
原理：
1.ele.getBoundingClientRect().top
获取元素距离视口的纵坐标越往下滑值越小加滚动距离
2.ele.getAttribute(‘自定义属性’)
获取元素自定义属性值
3.window.innerHeight
获取视口的高度

<!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>Document</title>
    <style>
        p {
            font-size: 40px;
        }
    </style>
</head>

<body>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    <p>aaaaaa</p>
    //自定义aaa-src属性值，值是需要加载的图片   src默认加载图片
    <img src="./images/load.gif" alt="" aaa-src="./images/fV.jpg">
    <script>
 		//获取图片元素
        let img = document.querySelector('img')
        //window添加滚动事件监听，用节流函数进行性能优化
        window.addEventListener('scroll', throttle(load, 1000))

        function load() {
        	//获取图片距离视口的高度
            let imageTop = img.getBoundingClientRect().top
            //获取视口的高度
            let wtop = window.innerHeight;
            //当图片距离视口的高度小于视口的高度  说明图片已经到了可视区域
            if (wtop > imageTop) {
            //获取自定义属性的值
                let src = img.getAttribute('aaa-src')
                //将自定义属性的值赋给图片的src属性  就可以加载图片了
                img.src = src
            }
            console.log(imageTop);
        }
        //定义一个立即执行的节流函数  如果直接绑定在scroll事件上，那么当页面滚动时，函数会被高频触发，这非常影响浏览器性能
        function throttle(fun, time) {
            let timer = null;
            return function () {
                if (!timer) {
                    fun.apply(this, arguments)
                    timer = setTimeout(() => {
                        timer = null
                    }, time)
                }
            }
        }
    </script>
</body>

</html>