图片懒加载

最新推荐文章于 2024-07-12 16:55:56 发布

时常.

最新推荐文章于 2024-07-12 16:55:56 发布

阅读量306

点赞数 10

分类专栏：小案例文章标签：前端 javascript html

本文链接：https://blog.csdn.net/m0_58430841/article/details/135269455

版权

小案例专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1. 图片懒加载js底层原理

图片直接全部加载的话会减缓渲染速度，产生白屏等进而影响用户体验

<style>
     img {
         display: block;
         width: 100%;
         height: 300px;
         margin-bottom: 20px;
     }
</style>
<body>
    <!-- src是会请求的资源 data-src只是属性，不会对性能造成影响 -->
    <img src="./demo.png" data-src="./img1.png">
    <img src="./demo.png" data-src="./img2.png">
    <img src="./demo.png" data-src="./img3.png">
    <img src="./demo.png" data-src="./img4.png">
    <img src="./demo.png" data-src="./img5.png">
    <img src="./demo.png" data-src="./img6.png">
    <img src="./demo.png" data-src="./img7.png">

    <script>
        let num = document.getElementsByTagName("img").length //获取屏幕可视区域的高度
        let img = document.getElementsByTagName("img")
        let n = 0

        lazyLoading()
        window.onscroll = lazyLoading //onscroll()在滚动条滚动的时候触发

        function lazyLoading(){
            let seeHeight = document.documentElement.clientHeight
         //获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离。
            let scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            for(let i = n; i < num; i++){
            //offsetTop 获取元素相对于文档顶部的高度
                if(img[i].offsetTop < seeHeight + scrollTop){
                    if(img[i].getAttribute("src") == "./demo.png"){
                        img[i].src = img[i].getAttribute("data-src")
                    }
                    n = i + 1; // 防止相同图片重复请求
                }
            }
        }

    </script>
</body>

时常.

关注

10
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
图片懒加载

/获取浏览器窗口顶部与文档顶部之间的距离，也就是滚动条滚动的距离。图片直接全部加载的话会减缓渲染速度，产生白屏等进而影响用户体验。//offsetTop 获取元素相对于文档顶部的高度。//onscroll()在滚动条滚动的时候触发。//获取屏幕可视区域的高度。// 防止相同图片重复请求。
复制链接

扫一扫