网页内容如何懒加载

懒加载是一种网页优化技术，可以减少页面初次加载时需要下载的资源量，提高页面加载速度。懒加载的核心思想就是将网页的资源（例如图片、视频等）延迟加载，只有当用户需要滚动页面到该资源的位置时才开始加载。

以下是懒加载的基本实现步骤：

将需要延迟加载的资源的标签中的 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(){varlazyLoadImages=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 =newImage();
image.onload=function(){// 异步请求完成，并获取到图片 URLvar url ='image.jpg';// 将图片的占位符的 data-src 属性设置为真实的资源 URLvar img = document.querySelector('.lazy');
    img.setAttribute('data-src', url);};
image.src ='image.jpg';

最后，使用 JavaScript 监听页面滚动事件，当用户滚动到图片的位置时，将该图片的 data-src 属性值赋值给它的 src 属性，让它开始加载真实的图片资源。

(function(){varlazyLoadImages=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 代码：

<!DOCTYPEhtml><html><head><title>懒加载示例</title><style>.lazy{opacity: 0;transition: opacity 0.3s ease-in-out;}</style></head><body><h1>懒加载示例</h1><imgclass="lazy"data-src="https://www.example.com/image1.jpg"src="https://www.example.com/placeholder.jpg"><imgclass="lazy"data-src="https://www.example.com/image2.jpg"src="https://www.example.com/placeholder.jpg"><imgclass="lazy"data-src="https://www.example.com/image3.jpg"src="https://www.example.com/placeholder.jpg"><imgclass="lazy"data-src="https://www.example.com/image4.jpg"src="https://www.example.com/placeholder.jpg"><script>(function(){varlazyLoadImages=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：

<tableclass="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);});// 添加行到表格functionaddRows(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++;}}}// 移除过时的行functionremoveRows(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><imgv-lazy="imageUrl"></div></template><script>import VueLazyload from'vue-lazyload';exportdefault{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><componentv-if="loaded":is="component"></component></div></template><script>exportdefault{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 属性的值。当路由被访问时，路由组件会按需加载。

需要注意的是，使用动态导入后，路由组件不会在打包时被包含在主 bundle 中，而是会被打包成单独的 chunk。这样可以实现更快的页面加载速度和更小的代码体积。

标签：前端 html

本文转载自: https://blog.csdn.net/wxlly06/article/details/129787872
版权归原作者 wxlly06 所有，如有侵权，请联系我们删除。

网页内容如何懒加载

懒加载的基本实现

图片是动态数据

懒加载图片的完整示例

长表格的懒加载

vue中懒加载

发表评论

“网页内容如何懒加载”的评论:

关于作者

overfit同步小助手

相关阅读

文章导航