网页内容如何懒加载

wxlly06

已于 2023-03-27 12:56:03 修改

阅读量2.7k

点赞数 1

分类专栏：网站开发文章标签：前端 html

于 2023-03-27 08:07:33 首次发布

本文链接：https://blog.csdn.net/wxlly06/article/details/129787872

版权

网站开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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

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

将需要延迟加载的资源的标签中的 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 属性的值。当路由被访问时，路由组件会按需加载。

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

wxlly06

关注

1
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
网页内容如何懒加载

懒加载是一种网页优化技术，可以减少页面初次加载时需要下载的资源量，提高页面加载速度。懒加载的核心思想就是将网页的资源（例如图片、视频等）延迟加载，只有当用户需要滚动页面到该资源的位置时才开始加载。需要注意的是，在实现懒加载时，需要权衡页面的加载速度和用户用于享受资源的时间，以确保在用户需要资源时加载足够快，同时避免用户太早看到空白页面。假设有一篇博客页面，页面上包含多张图片，其中有些图片非常大，加载时间较长，影响页面的加载速度和用户体验。
复制链接

扫一扫