网页性能优化02-懒加载工作原理

Posted 2022-11-30 坤小

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了网页性能优化02-懒加载工作原理相关的知识，希望对你有一定的参考价值。

懒加载工作原理

1.1-懒加载介绍（以图片懒加载为例）

1.为什么要有懒加载技术

（1）img标签特点：不管图片隐藏还是显示有src属性都会去加载
- 例如电商类网站，一个页面有几百张图片。有时候假设用户不滚动，也会加载图片资源，此时非常损耗网页性能
（2）那么如果页面上有太多的图片而且有些图片不在可视窗口内如果加载了会影响页面的渲染页面时间。
- 判断网页是否使用图片懒加载技术：滚动网页的时候，图片会动态加载（一般会有一个渐变动画，例如京东）

2.如何实现懒加载技术

核心原理：延迟加载：当图片进入可视区域内容的时候才去加载
实现思路
- 1.将图片真实资源放入一个自定义属性中
  - 自定义属性作用：存储图片路径，此时图片不会加载
- 2.监听页面滚动条事件
- 3.判断图片是否进入页面可视区域
- 4.取出图片的自定义属性，赋值给图片的src属性（此时真正加载图片资源）
示例代码如下：

<!doctype html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        * 
            margin: 0;
            padding: 0;
        

        ul 
            list-style: none;
            width: 1000px;
            margin: 0 auto;
        

        ul li 
            width: 230px;
            height: 230px;
            float: left;
            margin-right: 20px;
            margin-bottom: 20px;
        

        ul li.last 
            margin-right: 0;
        

        ul li img 
            width: 100%;
            height: 100%;
            display: block;
            opacity: 0;
            /* 过渡动画 */
            transition: all 5s linear;
        
    </style>
</head>

<body>
    <!-- 假设上面的内容高度1000px -->
    <div style="height: 1000px;;background-color: rgba(200, 111, 111, 0.5)"></div>
    <ul id="ul1">
        <li><img data-src="http://img.daimg.com/uploads/allimg/160324/1-160324232117.jpg" alt=""></li>
        <li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01P0.jpg" alt=""></li>
        <li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li>
        <li><img data-src="http://img.daimg.com/uploads/allimg/160318/1-16031P01332.jpg" alt=""></li>
    </ul>
   
    <script>
        /* 懒加载工作原理 */
        //0. 将图片的资源放入自定义属性中（例如data-src）
        //1.监听页面滚动条事件
        window.onscroll = function(e)
            console.log(document.scrollTop + document.clientHeight);
            
            //2.如果图片进入可视区域（假如400px）,则取出自定义属性，赋值给src属性（真正加载）
            //ul是否进入可视区域 ： 滚动条距离 + 页面可视区域高度 > 盒子高度
            if(document.documentElement.scrollTop + document.documentElement.clientHeight > 1000)
                var imgList = document.querySelectorAll('li>img');
                for(var i = 0;i<imgList.length;i++)
                    imgList[i].style.opacity = 1;//过渡动画
                    imgList[i].src = imgList[i].getAttribute('data-src');//过渡动画
                ;
            
        ;
    </script>
</body>

</html>

以上是关于网页性能优化02-懒加载工作原理的主要内容，如果未能解决你的问题，请参考以下文章