常用懒加载

最新推荐文章于 2023-08-12 23:41:38 发布

不难呐

最新推荐文章于 2023-08-12 23:41:38 发布

阅读量194

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_41238274/article/details/107298785

版权

JavaScript 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

懒加载及应用场景

懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。

当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。

实现的思路：

给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-），
监听scroll事件，当图片出现在可视区时，将data-src值赋值给src，加载图片，在图片未加载时，用alt 属性，在图像无法显示时的替代文本

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .imgs{
            display: flex;
            flex-direction: column;
            text-align: center;
            width: 500px;
        }
        .img-item{
            height:600px;
            width: 400px;
            margin: 10px;
        }
    </style>
</head>
<body>
    <div class="imgs">
        <img data-src="img/1.jpg" alt="loading" class="img-item">
        <img data-src="img/2.jpg" alt="loading" class="img-item">
        <img data-src="img/3.jpg" alt="loading" class="img-item">
        <img data-src="img/4.jpg" alt="loading" class="img-item">
        <img data-src="img/5.jpg" alt="loading" class="img-item">
        <img data-src="img/6.jpg" alt="loading" class="img-item">
    </div>
</body>
<script>
      let imgs = document.querySelectorAll('img');
        let lazyload = function(){
            let scrollTop = document.body.scrollTop || document.documentElement.scrollTop; 	//获取浏览器滚动高度
            let height = window.innerHeight; 	//获取浏览器可视高度
            for(let i=0;i < imgs.length;i++){
                //如果元素距离文档顶部的高度小于浏览器的滚动高度加浏览器的可视高度，则需要加载
                if(imgs[i].offsetTop < scrollTop + height ){	  //imgs[i].offsetTop 距离文档顶部的高度
                    imgs[i].src = imgs[i].getAttribute('data-src'); //将data-src属性值赋值给src
                }
            }
        }
        //调用懒加载函数,加一个防抖函数
        function throttle(method,delay){
           let timer = null;
            return function(){
                clearTimeout(timer);
                timer=setTimeout(function(){
                    method()
                },delay);
            }
        }
        window.onscroll = throttle(lazyload,200);

</script>
</html>

不难呐

关注

0
点赞
踩
0

收藏

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

懒加载及应用场景懒加载是一种对网页性能优化的方式，比如当访问一个页面的时候，优先显示可视区域的图片而不一次性加载所有图片，当需要显示时，再发送图片请求，避免打开网页时加载过多资源。当一个网站的加载图片过多时就需要懒加载的协助，页面图片多时，在首次载入时一次性加载会耗费时间长，使用懒加载可以使页面加载速度快、减轻服务器的压力、节省流量。实现的思路：给目标元素指定一张占位图，将真实的图片链接存储在自定义属性中（data-），监听scroll事件，当图片出现在可视区时，将data-src值赋值给src，
复制链接

扫一扫