March7th 
1037 字
5 分钟
懒加载
Random Cover
懒加载（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
最后更新于 2024-06-05，距今已过 522 天
部分内容可能已过时