懒加载是一种网页优化技术，可以减少页面初次加载时需要下载的资源量，提高页面加载速度。懒加载的核心思想就是将网页的资源（例如图片、视频等）延迟加载，只有当用户需要滚动页面到该资源的位置时才开始加载。
以下是懒加载的基本实现步骤：
- 将需要延迟加载的资源的标签中的 src 属性设置为占位符（例如 data-src）。
- 使用 JavaScript 监听页面滚动事件（例如window.onscroll）。
- 在用户滚动到资源所在位置时，将该资源的 data-src 属性值赋值给 src 属性，开始加载资源。
- 使用 CSS 或 JavaScript 给资源添加 fade-in 效果，提升用户体验。
需要注意的是，在实现懒加载时，需要权衡页面的加载速度和用户用于享受资源的时间，以确保在用户需要资源时加载足够快，同时避免用户太早看到空白页面。
假设有一篇博客页面，页面上包含多张图片，其中有些图片非常大，加载时间较长，影响页面的加载速度和用户体验。这时就可以使用懒加载技术，将这些图片的src属性设置为占位符，只有当用户滚动到图片位置时才开始加载真实的图片资源。
懒加载的基本实现
示例代码如下：
HTML代码：
<img class="lazy" data-src="image.jpg" src="placeholder.jpg">
<img class="lazy" data-src="image2.jpg" src="placeholder.jpg">
CSS代码：
.lazy {
opacity: 0; /* 初始时不可见 */
transition: opacity 0.3s ease-in-out;
}
JavaScript代码：
(function() {
var lazyLoadImages = function() {
var lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(function(img) {
if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0) {
img.src = img.dataset.src;
img.classList.add('fade-in');
img.classList.remove('lazy');
}
});
}
lazyLoadImages(); // 初始化页面时加载可见区域内的图片
window.addEventListener('scroll', lazyLoadImages); // 监听页面滚动事件
})();
在上述代码中，图片的占位符使用了相同的src属性值placeholder.jpg，真实的图片资源使用了data-src属性来指定，JavaScript代码监听了scroll事件，一旦某个图片所在位置滚动到可视区域时，就将该图片的data-src属性值赋值给它的src属性，让它开始加载真实的图片资源，并添加了fade-in效果，提升用户体验。
图片是动态数据
如果图片是动态数据，并且需要通过 AJAX 或其他异步方式获取，那么可以按照以下方式实现懒加载。
- 首先，为需要懒加载的图片添加占位符，和前面的例子一样。
<img class="lazy" data-src="image.jpg" src="placeholder.jpg">
- 在页面初始化时，不需要为图片设置 src 属性，只为它们提供 data-src 属性值。然后在完成异步请求之后，将每个图片的
data-src 属性值设置为真实的资源 URL 。
var image = new Image();
image.onload = function() {
// 异步请求完成，并获取到图片 URL
var url = 'image.jpg';
// 将图片的占位符的 data-src 属性设置为真实的资源 URL
var img = document.querySelector('.lazy');
img.setAttribute('data-src', url);
};
image.src = 'image.jpg';
- 最后，使用 JavaScript 监听页面滚动事件，当用户滚动到图片的位置时，将该图片的 data-src 属性值赋值给它的 src
属性，让它开始加载真实的图片资源。
(function() {
var lazyLoadImages = function() {
var lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(function(img) {
if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0 && !img.src) {
img.src = img.dataset.src;
img.classList.add('fade-in');
img.classList.remove('lazy');
}
});
}
lazyLoadImages(); // 初始化页面时加载可见区域内的图片
window.addEventListener('scroll', lazyLoadImages); // 监听页面滚动事件
})();
在上述代码中，当当前图片的src属性未被设置时，才将图片的data-src属性值赋值给它的src属性，避免重复加载图片。
懒加载图片的完整示例
以下是一个懒加载图片的完整示例 HTML 代码：
<!DOCTYPE html>
<html>
<head>
<title>懒加载示例</title>
<style>
.lazy {
opacity: 0;
transition: opacity 0.3s ease-in-out;
}
</style>
</head>
<body>
<h1>懒加载示例</h1>
<img class="lazy" data-src="https://www.example.com/image1.jpg" src="https://www.example.com/placeholder.jpg">
<img class="lazy" data-src="https://www.example.com/image2.jpg" src="https://www.example.com/placeholder.jpg">
<img class="lazy" data-src="https://www.example.com/image3.jpg" src="https://www.example.com/placeholder.jpg">
<img class="lazy" data-src="https://www.example.com/image4.jpg" src="https://www.example.com/placeholder.jpg">
<script>
(function() {
var lazyLoadImages = function() {
var lazyImages = document.querySelectorAll('.lazy');
lazyImages.forEach(function(img) {
if (img.getBoundingClientRect().top <= window.innerHeight && img.getBoundingClientRect().bottom >= 0 && !img.src) {
img.src = img.dataset.src;
img.classList.add('fade-in');
img.classList.remove('lazy');
}
});
}
lazyLoadImages(); // 初始化页面时加载可见区域内的图片
window.addEventListener('scroll', lazyLoadImages); // 监听页面滚动事件
})();
</script>
</body>
</html>
在上面的代码中，图片的占位符使用了相同的 src 属性值 https://www.example.com/placeholder.jpg，在需要懒加载的图片中使用 data-src 属性指定真实的图片资源地址。JavaScript 代码中监听了scroll事件，并在图片进入可视区域时将占位符的 src 属性设置为真实的资源地址，同时添加了 fade-in 效果。
长表格的懒加载
长表格的懒加载需要满足以下两个需求：
仅在表格的当前视窗范围内显示数据，避免整个表格的一次性加载；
滚动表格时，自动加载新的数据，并移除视窗范围之外的旧数据。
以下是一个基于 jQuery 的表格懒加载示例：
HTML：
<table class="table">
<thead>
<tr>
<th>ID</th>
<th>名称</th>
<th>价格</th>
</tr>
</thead>
<tbody>
<!-- 表格内容为空 -->
</tbody>
</table>
CSS：
.table {
height: 400px;
overflow-y: scroll;
border-collapse: collapse;
width: 100%;
}
td, th {
padding: 8px;
border: 1px solid #ddd;
text-align: left;
}
JavaScript：
$(document).ready(function() {
var table = $('.table');
var tbody = table.find('tbody');
var rows = [];
// 模拟数据
for (var i = 1; i <= 1000; i++) {
rows.push({
id: i,
name: '商品 ' + i,
price: '$' + (Math.random() * 100).toFixed(2)
});
}
// 计算每行的高度
var rowHeight = tbody.find('tr:first-child').outerHeight();
var visibleRowsCount = Math.ceil(table.height() / rowHeight);
var loadedRowsCount = 0;
var totalRowsCount = rows.length;
// 滚动事件处理
table.on('scroll', function() {
var scrollTop = table.scrollTop();
var startIdx = Math.floor(scrollTop / rowHeight) - visibleRowsCount;
var endIdx = startIdx + visibleRowsCount * 2;
if (startIdx < 0) startIdx = 0;
if (endIdx >= totalRowsCount) endIdx = totalRowsCount - 1;
addRows(startIdx, endIdx);
removeRows(startIdx, endIdx);
});
// 添加行到表格
function addRows(fromIdx, toIdx) {
if (loadedRowsCount >= totalRowsCount) return;
if (toIdx >= totalRowsCount) {
toIdx = totalRowsCount - 1;
}
for (var i = fromIdx; i <= toIdx; i++) {
if (rows[i]) {
var tr = $('<tr>');
tr.append($('<td>').text(rows[i].id));
tr.append($('<td>').text(rows[i].name));
tr.append($('<td>').text(rows[i].price));
tbody.append(tr);
loadedRowsCount++;
}
}
}
// 移除过时的行
function removeRows(fromIdx, toIdx) {
if (loadedRowsCount <= visibleRowsCount * 3) return;
if (fromIdx > visibleRowsCount) {
tbody.find('tr:lt(' + (fromIdx - visibleRowsCount) + ')').remove();
loadedRowsCount -= (fromIdx - visibleRowsCount);
}
if (toIdx < (totalRowsCount - visibleRowsCount * 2)) {
tbody.find('tr:gt(' + (toIdx - visibleRowsCount * 2) + ')').remove();
loadedRowsCount -= (totalRowsCount - visibleRowsCount * 2 - toIdx);
}
}
// 初始化表格
addRows(0, visibleRowsCount * 3 - 1);
});
在上述代码中，我们通过以下步骤实现了懒加载表格的功能：
- 计算表格的每行高度、可见行数等参数；
- 使用模拟数据初始化表格，实现懒加载；
- 监听表格的滚动事件，实现滚动加载和移除过时行的功能。
在滚动事件处理函数中，我们计算出当前视窗范围内的数据索引，并通过 addRows 和 removeRows 函数来实现只加载当前视窗范围内的数据，并移除视窗范围之外的旧数据。
vue中懒加载
在 Vue 中，懒加载可以应用于图片、组件、路由等方面。下面分别介绍各种情况下的实现方法。
- 图片懒加载
使用 vue-lazyload 插件可以方便地实现图片的懒加载。它提供了一个 v-lazy 指令，只有当图片进入可视区域时才开始加载。
以下是一个使用 vue-lazyload 插件的简单示例：
<template>
<div>
<img v-lazy="imageUrl">
</div>
</template>
<script>
import VueLazyload from 'vue-lazyload';
export default {
data() {
return {
imageUrl: 'placeholder.png'
};
},
created() {
this.imageUrl = 'http://example.com/image.jpg'; // 真实图片地址
},
directives: {
lazyload: VueLazyload.directive
}
}
</script>
使用 v-lazy 指令将图片的 src 属性设置为占位符（例如 placeholder.png），然后将真实图片地址赋值给 imageUrl 变量，当图片进入可视范围时，vue-lazyload 插件会自动将 imageUrl 对应的图片加载进来。
有关 vue-lazyload 的更多用法，请参考官方文档。
- 组件懒加载
在 Vue 中，可以使用异步组件实现组件的懒加载。异步组件使用 import() 动态导入组件定义，只有在需要使用组件时才会加载。
以下是一个使用异步组件实现懒加载的示例：
<template>
<div>
<button @click="loadComponent">加载组件</button>
<component v-if="loaded" :is="component"></component>
</div>
</template>
<script>
export default {
data() {
return {
loaded: false,
component: null
};
},
methods: {
loadComponent() {
import('@/components/SomeComponent.vue').then(component => {
this.loaded = true;
this.component = component.default;
});
}
}
}
</script>
在上述示例中，通过 import() 函数异步加载组件 SomeComponent.vue，将组件定义赋值给 component 变量，并将 loaded 变量设置为 true，在模板中使用动态组件将组件定义渲染为实例。
- 路由懒加载
在路由中使用动态导入（Dynamic Import）可以实现路由的懒加载。动态导入是 ECMAScript6 中的语法，使用 import() 函数动态加载路由定义，只有在需要使用路由时才会加载。
以下是一个使用动态导入实现路由懒加载的示例：
const routes = [
{
path: '/home',
name: 'home',
component: () => import('@/views/Home.vue')
},
{
path: '/about',
name: 'about',
component: () => import('@/views/About.vue')
}
];
在上述示例中，使用 import() 函数动态导入路由组件，将组件定义作为 component 属性的值。当路由被访问时，路由组件会按需加载。文章来源：https://www.toymoban.com/news/detail-763902.html
需要注意的是，使用动态导入后，路由组件不会在打包时被包含在主 bundle 中，而是会被打包成单独的 chunk。这样可以实现更快的页面加载速度和更小的代码体积。文章来源地址https://www.toymoban.com/news/detail-763902.html
到了这里，关于网页内容如何懒加载的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
