懒加载案例

千寒33

于 2022-03-08 21:55:15 发布

阅读量175

点赞数

分类专栏：练习文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/weixin_52120405/article/details/123364277

版权

练习专栏收录该内容

15 篇文章 1 订阅

订阅专栏

懒加载：

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

懒加载优点：

页面加载速度快、可以减轻服务器压力、节约了流量，用户体验好

HTML

<body>
    <img src="" class="imgs" data-src="img/001.jpg" alt="img">
    <img src="" class="imgs" data-src="img/002.jpg" alt="img">
    <img src="" class="imgs" data-src="img/003.jpg" alt="img">
    <img src="" class="imgs" data-src="img/004.jpg" alt="img">
</body>

CCS

img{
            display: block;
            width: 500px;
            height: 400px;
        }

<script>
    var imgs=document.getElementsByClassName('imgs')
    var n=0;//存储图片加载到的位置，避免每次从第一张图片开始遍历
    window.onscroll=function(){
        showImg();
    }

    function showImg(){
        //获取可视区高度
        var seeHeight=document.documentElement.clientHeight
        //获取滚动条位置
        var srclltop=document.body.scrollTop||document.documentElement.scrollTop//兼容处理
        // console.log(srclltop)
        for(var i=n;i<imgs.length;i++){
            if(imgs[i].getAttribute('src')==''||!imgs[i].getAttribute('src')==null){//若src属性值为空
                imgs[i].src=imgs[i].getAttribute('data-src')
            }
            n=i+1;
        }
    }
    showImg();//第一次进入调用一次
</script>

千寒33

关注

0
点赞
踩
0

收藏

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

懒加载：懒加载也就是延迟加载。当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次，俗称占位图），只有当图片出现在浏览器的可视区域内时，才设置图片正真的路径，让图片显示出来。这就是图片懒加载。懒加载优点：页面加载速度快、可以减轻服务器压力、节约了流量，用户体验好HTML<body> <img src="" class="imgs" data-src="img/...
复制链接

扫一扫