懒加载

懒加载（Lazy Loading）是一种优化网页或应用程序加载时间的技术。它的基本思想是按需加载资源，而不是一次性加载所有资源。这种方法可以显著减少初始加载时间，提高用户体验，并节省服务器带宽。

在网页中，懒加载通常用于图像和视频等媒体资源的加载，也可以用于加载长网页中的内容或组件。以下是懒加载的一些关键点：

延迟加载图像：当用户滚动到页面的某个部分时，才加载相应的图像。这可以通过监听滚动事件并计算图像是否进入视口（用户可见的屏幕区域）来实现。
性能提升：通过延迟加载那些不在视口中的资源，可以减少页面首次加载时需要下载的数据量，从而加快页面加载速度。
用户体验：用户不必等待所有图像都加载完毕才能开始浏览页面，特别是对于含有大量图像的网站，如电子商务和社交媒体网站。
节约带宽：不是所有用户都会滚动到页面底部，因此，不是所有资源都需要加载。这有助于节约服务器带宽，减少不必要的资源传输。
实现方式：可以使用JavaScript库或框架来实现懒加载，如vanilla JavaScript、jQuery、React、Vue等。浏览器也逐渐支持原生的懒加载特性，如<img>标签的loading="lazy"属性。
渐进式懒加载：即使JavaScript被禁用或尚未加载，现代懒加载技术也可以通过使用HTML属性（如loading="lazy"）来确保图像的渐进式加载。
注意事项：懒加载可能会影响搜索引擎优化（SEO），因为搜索引擎爬虫可能不会等待懒加载的资源。为了解决这个问题，可以使用服务器端渲染（SSR）或者在爬虫访问时禁用懒加载。

懒加载是一种简单而有效的性能优化技术，它可以帮助提升用户体验，减少服务器负载，并在保持页面响应性的同时按需加载资源。

实现

在 HTML 中实现懒加载通常是通过 JavaScript 来实现的，主要是利用 JavaScript 监听滚动事件，判断元素是否进入可视区域，然后再加载相关内容。以下是一个简单的示例代码：

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Lazy Loading Example</title>
    <style>
      .placeholder {
        width: 100%;
        height: 300px;
        background: #f2f2f2;
      }
      .image {
        display: none;
      }
    </style>
  </head>
  <body>
    <div class="placeholder"></div>

    <img class="image" data-src="image.jpg" alt="Lazy Loaded Image" />

    <script>
      document.addEventListener('DOMContentLoaded', function () {
        let lazyImages = document.querySelectorAll('.image')

        function lazyLoad() {
          lazyImages.forEach(image => {
            if (image.offsetTop < window.innerHeight + window.pageYOffset) {
              image.setAttribute('src', image.getAttribute('data-src'))
              image.onload = function () {
                image.classList.add('fade-in')
              }
            }
          })
        }

        window.addEventListener('scroll', lazyLoad)
        lazyLoad()
      })
    </script>
  </body>
</html>

在上面的示例中，首先定义了一个占位符 .placeholder 和一个图片 .image，图片的真实地址通过 data-src 属性指定。当页面滚动时，JavaScript 会检测图片是否进入可视区域，如果是则加载图片并显示，实现了懒加载的效果。

使用三方插件（echo.js）

echo.js使用原生js编写，不需要依赖其他库，可以独立使用。（lazyload是jQuery插件，使用时必须引入jquery）

<script src="https://cdn.bootcss.com/echo.js/1.7.3/echo.js"></script>

设置图片的自定义属性为data-echo并获取元素

var echo = document.getElementById('echo')

echo.init({
  offset: 0, // 图片在可视区域下方一段距离时，开始加载。
  throttle: 0, // 图片延迟多少秒后加载
  unload: true, //是否卸载在可视区域外面的图片，默认为false。
  callback: function (element, top) {},
})

vue懒加载

在 Vue Router 中，懒加载可以帮助我们按需加载组件，从而减小初始页面加载时间，提高应用性能。Vue Router 支持使用动态 import 结合 webpack 的代码分割功能来实现懒加载。

方案：箭头函数定义路由

const router = new VueRouter({
  routes: [{path: '/list', component: () => import('@/components/list.vue')}],
})

参考

ChatGpt

懒加载的原理及实现

前端Vue篇之Vue-Router 的懒加载如何实现

懒加载

前端学习笔记

懒加载

实现

使用三方插件（echo.js）

vue懒加载

参考