阐述懒加载？_loading="lazy-优快云博客

本文链接：https://blog.youkuaiyun.com/wenmin1987/article/details/142964800

什么是懒加载？

懒加载（Lazy Loading）是一种延迟加载技术，它允许在需要时才加载页面上的资源，而不是在页面初次加载时就加载所有资源。通过懒加载，可以优化页面加载时间，减轻服务器负载，并提供更好的用户体验。

懒加载的原理

懒加载的原理很简单：只有当某个元素进入浏览器的可视区域内时，才会触发该元素的加载操作。这通常通过监听浏览器的滚动事件来实现。当用户滚动页面时，JavaScript 代码会判断需要懒加载的元素是否进入了可视区域，如果是，则开始加载相应的资源。

懒加载的使用场景

懒加载在以下几种情况下非常有用：

图片懒加载

页面中包含大量的图片时，可以使用图片懒加载来优化页面加载速度。当用户滚动页面至某个图片位置时，才加载该图片。这样可以减少页面加载时间并节省带宽。

延迟加载长内容

当页面中有很长的内容需要加载时，可以延迟加载部分内容。通过监听页面滚动事件，当用户滚动到相应位置时，再加载该部分内容。这可以提高用户浏览体验，避免一次性加载大量内容导致页面卡顿。

按需加载组件

在一些复杂的 Web 应用程序中，某些组件可能只有在特定条件下才需要加载。通过懒加载这些组件，可以优化初始页面加载时间，并提高后续操作的响应速度。

一、图片懒加载描述与实现方法：

图片懒加载是在用户需要使用图片的时候才加载图片的行为，是一种有效的优化策略有利于提高网站和应用的性能减少资源消耗，减轻服务器和用户设备的负担提高页面加载速度，从而保证更好的用户体验实现图片懒加载的方法:

1.HTML标签设置懒加载--img的loading属性

2.JS 方法实现懒加载--视口与图像位置判断

3.调用web API-Intersection Observer API.

4.使用第三方库--如LazyLoad.js、Lozad.js

5.框架中的组件--如vue-lazyload、react-lazyload

1、对应代码：

<body>

<style>

.box{

width: 300px;

height: 500px;
background-image:linear-gradient(#73d5f3，#19198e5);
}
img{

width: 300px;

margin-bottom: 20px;

border:1px golid #ddd;

border-radius: 8px;
}
</style>

</head>

<body>

        <div class="box"></div>

        <div class="1azy-container">

                <img src="./img/meinv.pg" loading="lazy"/>

        </div>

</body>

2、对应代码

<body>

<style>

.box{

width: 300px;

height: 5000px;
background-image:linear-gradient(#73d5f3，#19198e5);
}
img{

width: 300px;

margin-bottom: 20px;

border:1px golid #ddd;

border-radius: 8px;
}
</style>

</head>

<body>

        <div class="box"></div>

        <div class="1azy-container">

                <img src  data-src="./img/meinv.pg" class="lazy-load"/>

        </div>

</body>

<script>
    document.addEventlistener('DOMContentLoaded',function(){

    var lazyImags=document.querySelectorAll(.lazy-load);

    function isElementInViewport(el){
        var rect= el.getBoundingClientRect();

        return {

                 rect.top >=0&&
                rect.left >=0&&
                rect.bottom <=

                     (window.innerHeight || document.documentElement.clientHeight) &&
                rect.riqht <=
                     (window.innerWidth || document.documentElement.clientWidth)

                }

}

 function lazyLoad(){

    lazyImags.forEach(function(lazyImage){

    if(isElementInViewport(lazyImage)){

        lazyImage.src=lazyImage.dataset.src;

        lazyImage.classList.remove('.lazy-load')

    }

    })

  }

window.addEventlistener('scroll",lazyLoad);

lazyLoad(); // 刚进入没有滚动也要加载
}):
</script>

3、对应代码

<body>

        <div class="box"></div>

        <div class="1azy-container">

                <img src  data-src="./img/meinv.pg" class="lazy-img"/>

        </div>

</body>

<script>
    document.addEventlistener('DOMContentLoaded',function(){

    var lazyImags=document.querySelectorAll(.lazy-img);

    var observer = new IntersectionObserver((entries)=>{

            entries.forEach((entry)=>{

                entry.target.src=entry.target.dataset.src;

                entry.target.classList.remove('.lazy-img');

                observer.unoserve(entry.target);

              })

           });

    lazyImages.forEach((img)=>{

        observer.observe(img);

      });

 })
</script>

二、路由懒加载

前端懒加载是一种性能优化技术，旨在提高应用的加载速度和性能。‌

它主要应用于单页应用（SPA）中，通过按需加载用户实际需要的资源，而不是在应用初始化时一次性加载所有资源。这种方式能够显著减少应用的初始加载时间，降低服务器的负载，提升用户体验‌1。

前端懒加载的实现原理主要依赖于现代JavaScript模块加载器和打包工具（如Webpack）的支持。当应用路由发生变化时，根据当前路由动态地加载对应的组件或模块，而不是在应用启动时加载所有内容。具体实现步骤如下：

‌配置路由‌：在路由配置文件中，为需要懒加载的路由设置特定的加载函数，该函数会在路由被访问时动态地加载对应的组件或模块。
‌动态导入‌：利用ES6的动态导入语法（import()）或Webpack等打包工具的特定语法（如require.ensure()），在路由加载函数中实现组件或模块的动态导入。
‌模块分割‌：打包工具会根据动态导入的语法将应用拆分成多个小的模块（chunk），每个模块包含一组相关的资源。当用户访问某个路由时，只会加载该路由对应的模块，而不会加载其他模块。
‌缓存机制‌：浏览器会对已加载的模块进行缓存，当用户再次访问该路由时，可以直接从缓存中获取资源，无需再次从服务器加载‌1。