前端-懒加载

news2024/11/24 1:02:48

1.懒加载的概念

2.懒加载的特点

3.懒加载的实现原理

4.懒加载与预加载的区别

5.懒加载实现

6.预加载实现

1.懒加载的概念

懒加载也加延迟加载、按需加载，指在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。

2.懒加载的特点

（1）减少了无用资源的加载

（2）提升用户体验

（3）防止加载过多图片而影响其他资源文件的加载

3.懒加载的实现原理

图片的加载是由src引起的，当对src赋值时，浏览器就会请求图片资源。

根据这个原理，我们使用HTML5的data-src属性来存储图片的路径，在需要加载图片时，将data-src中的图片路径赋值给src，这样样思想按需加载，即懒加载。

实现原理：

window.innerHeight是浏览器可视区的高度

document.body.scrollTop || document.documentElement.scrollTop是浏览器滚动过的距离

imgs.offsetTop是元素顶部距离文档顶部的高度（包括了滚动条的距离）

图片加载条件：imgs.offsetTop<window.innerHeight+document.body.scrollTop

4.懒加载与预加载的区别

两者都是提升网页性能的方式，主要区别是一个迟缓甚至不加载，一个是提前加载。

懒加载是延迟加载，指的是在长网页中当用户需要去访问时，再去加载。

预加载指的是将所需的资源提前请求加载到本地，后面需要用时直接从缓存中取资源。

	懒加载	预加载
加载时机	用户需要时（如滚动到页面某个位置）	页面加载过程中或加载完成前
目的	减少初始加载时间，提高页面加载速度，缓解服务器前端压力	加快页面内容的呈现速度，提升页面切换速度和流畅度
应用场景	长滚动页面、资源密集型网站	关键资源加载、预测用户行为
对服务器压力	减轻	增加（但换取更好的用户体验）

5.懒加载实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片性能优化——懒加载</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .container {
            width: 100%;
            height: 9000px;
            background-color: antiquewhite;
        }
    </style>
</head>
<body>
    <!-- 图片加载条件：imgs.offsetTop<window.innerHeight+document.body.scrollTop -->
    <div class="container">
        <img src="loading.gif" data-src="./images/01.jpg">
        <img src="loading.gif" data-src="./images/02.jpg">
        <img src="loading.gif" data-src="./images/03.jpg">
        <img src="loading.gif" data-src="./images/04.jpg">
        <img src="loading.gif" data-src="./images/05.jpg">
        <img src="loading.gif" data-src="./images/06.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia1.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia2.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia3.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia4.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia5.jpg">
        <img src="loading.gif" data-src="./images/lanrenzhijia6.jpg">
    </div>
    <script>
        console.log("浏览器可视区的高度",window.innerHeight);
        console.log("浏览器滚动过的距离",document.body.scrollTop,document.documentElement.scrollTop);
        let imgs=document.querySelectorAll("img");
        function lazyLoad(){
            let scrollTop=document.body.scrollTop||document.documentElement.scrollTop; //浏览器滚动过的距离
            let winHeight=window.innerHeight;
            for(let i=0;i<imgs.length;i++){
                if(imgs[i].offsetTop<scrollTop+winHeight){
                    imgs[i].src=imgs[i].getAttribute("data-src");
                    console.log(imgs[i].offsetTop,scrollTop,winHeight);
                    console.log(`第${i}张图片出来了`);
                }
            }
        }
        window.onscroll=lazyLoad;
    </script>
</body>
</html>

6.预加载实现

在HTML文档的<head>部分或<body>的底部（确保在DOM元素之前或之后），我们可以使用JavaScript来创建新的Image对象，并设置它们的src属性为要预加载的图片URL。浏览器就会在页面加载过程中提前下载这些图片。

<script>  
function preloadImages(urls) {  
    if (!preloadImages.list) {  
        preloadImages.list = [];  
    }  
    for (var i = 0; i < urls.length; i++) {  
        var img = new Image();  
        img.onload = function() {  
            var index = preloadImages.list.indexOf(this);  
            if (index !== -1) {  
                // 可选：加载完成后的回调处理  
                console.log('Image ' + (index + 1) + ' loaded');  
                // 移除已加载的图片引用，避免内存泄漏（可选）  
                preloadImages.list.splice(index, 1);  
            }  
        };  
        img.onerror = function() {  
            console.error('Failed to load image ' + this.src);  
        };  
        preloadImages.list.push(img);  
        img.src = urls[i];  
    }  
}  

// 调用预加载函数，传入图片URL数组  
preloadImages(['img1.jpg', 'img2.jpg', 'img3.jpg', 'img4.jpg']);  
</script>

若文章对你有帮助，点个赞吧！