前端JS图片懒加载原理方案详解

前端JS图片懒加载原理方案详解

什么是图片懒加载?

图片懒加载指的是在网页的滚动过程中,将未出现在视窗内的图片延迟加载,等到图片即将进入到可视区域时再将其加载。相对于一开始就加载所有图片的方式,图片懒加载能很大程度地减少页面渲染时的负担,节省带宽资源。

为什么需要图片懒加载?

随着富媒体网站的发展,页面上的图片数量越来越多,而把所有图片一开始就加载出来很容易造成页面加载缓慢,用户体验很差。因此,实现图片懒加载不仅可以提升用户体验,也可以提高页面的性能。

实现方式

图片懒加载的实现方式有多种,其中最常用的方式是利用 Javascript 编写实现。

1. 使用懒加载库

目前市面上常用的 js 懒加载库有 Lazyload.jslayzr.js 等。这些库已经考虑了各种情况,使用这些库能够很快速地实现图片懒加载。

Lazyload.js 库中只需要加入以下代码,即可轻松完成图片懒加载:

var lazyload = new LazyLoad({
    elements_selector: ".lazy"
});

2. 自行编写懒加载脚本

自行编写懒加载脚本需要考虑到以下几个问题:

  • 如何获取需要加载的图片
  • 如何判断图片是否进入可视区域
  • 加载成功以后的处理

下面给出一个基于 Intersection Observer API 的懒加载脚本实现。

// 获取所有需要懒加载的img标签
let images = document.querySelectorAll("img[data-src]");

let observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.intersectionRatio > 0) {
      // 进入可视区域,进行加载
      entry.target.setAttribute("src", entry.target.getAttribute("data-src"));
      observer.unobserve(entry.target);
    }
  });
});

// 逐个监控每个需要懒加载的img标签
for (let i = 0; i < images.length; i++) {
  observer.observe(images[i]);
}

示例说明

示例1

为了展示示例1,我们先准备一个大量图片的页面,然后编写下面的 HTML 代码:

<div class="gallery">
  <img data-src="image1.jpg" />
  <img data-src="image2.jpg" />
  <img data-src="image3.jpg" />
  <img data-src="image4.jpg" />
  <img data-src="image5.jpg" />
  <img data-src="image6.jpg" />
  <img data-src="image7.jpg" />
  <img data-src="image8.jpg" />
  <img data-src="image9.jpg" />
  <img data-src="image10.jpg" />
</div>

然后引入 Lazyload.js 库,并解析所有的延迟加载图片。

<script src="path/to/Lazyload.js"></script>
<script>
  var lazyload = new LazyLoad({
      elements_selector: ".gallery img"
  });
</script>

示例2

为了展示示例2,我们还是先准备一个大量图片的页面,然后编写下面的 HTML 代码:

<div class="gallery">
  <img data-src="image1.jpg" />
  <img data-src="image2.jpg" />
  <img data-src="image3.jpg" />
  <img data-src="image4.jpg" />
  <img data-src="image5.jpg" />
  <img data-src="image6.jpg" />
  <img data-src="image7.jpg" />
  <img data-src="image8.jpg" />
  <img data-src="image9.jpg" />
  <img data-src="image10.jpg" />
</div>

然后我们编写下面的 JavaScript 代码:

let images = document.querySelectorAll(".gallery img");
let observer = new IntersectionObserver(function(entries) {
  entries.forEach(function(entry) {
    if (entry.intersectionRatio > 0) {
      // 进入可视区域,进行加载
      entry.target.setAttribute("src", entry.target.getAttribute("data-src"));
      observer.unobserve(entry.target);
    }
  });
});

images.forEach(function(image) {
  // 判断并监控每个img元素
  if (image.offsetTop < window.innerHeight) {
    image.setAttribute("src", image.getAttribute("data-src"));
  } else {
    observer.observe(image);
  }
});

我们首先找到所有需要懒加载的img元素,然后通过 Intersection Observer API 来监控每个img元素。对于已经进入可视区域的img元素,直接加载他的src属性;对于那些尚未进入可视区域的img元素,等待浏览器触发相应的scroll事件后再进行加载操作,从而实现图片懒加载功能。

以上是前端JS图片懒加载的原理方案详解,希望对你有所帮助!

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:前端JS图片懒加载原理方案详解 - Python技术站

(0)
上一篇 2023年6月25日
下一篇 2023年6月25日

相关文章

  • Word2016中visio图像右键不能打开怎么办?

    如果 Word 2016 中 Visio 图像右键不能打开,可能是由于安装问题或配置设置问题导致的。下面提供一些可能有用的方法,帮助解决这个问题。 方法一:检查 Visio 安装 首先,需要确保 Visio 已经正确安装。如果安装过程中出现错误或问题,可能导致 Visio 图像在 Word 中无法打开。可以按照以下步骤检查 Visio 的安装情况。 打开“控…

    other 2023年6月27日
    00
  • MySQL服务器的SSD性能问题分析和测试详解

    当涉及到MySQL服务器的SSD性能问题分析和测试时,以下是一个完整的攻略,其中包含两个示例说明: 1. 性能问题分析 步骤1:收集基本信息 首先,收集MySQL服务器的基本信息,包括硬件配置、操作系统、MySQL版本等。这些信息对于后续的性能问题分析非常重要。 步骤2:检查硬件配置 确保服务器的硬件配置满足MySQL的最低要求,并且SSD硬盘的读写性能符合…

    other 2023年10月18日
    00
  • mysql 8.0.15 版本安装教程 连接Navicat.list

    MySQL 8.0.15 版本安装教程 连接Navicat.list 本教程将详细介绍如何安装 MySQL 8.0.15 版本,并使用 Navicat 连接到 MySQL 数据库。以下是完整的安装和连接过程: 步骤 1:下载和安装 MySQL 8.0.15 访问 MySQL 官方网站(https://dev.mysql.com/downloads/mysql…

    other 2023年8月5日
    00
  • cpupower命令–调整cpu主频

    cpupower命令 – 调整CPU主频 cpupower是一个Linux命令行工具,用于管理CPU的功耗和性能设置。它可以用来调整主频以提高系统性能或节省电力。在本攻略中,我们将详细介绍如何使用cpupower命令来调整CPU主频,包括安装、使用和示例说明等内容。 安装cpupower命令 大多数Linux发行版中,cpupower命令已经预装。如果您的系…

    other 2023年5月8日
    00
  • delphicase语句

    当然,我很乐意为您提供有关“Delphi Case语句”的完整攻略。以下是详细的步骤和两个示例: 1 Delphi Case语句 Delphi Case语句是一种条件语句,用于根据不同的条件执行不同的代码块。它类似于其他编程语言中的switch语句。 2 Delphi Case语句语法 以下是Delphi Case语句的语法: case expression…

    other 2023年5月6日
    00
  • 资源管理器FreeCommander详细使用图文教程

    资源管理器FreeCommander详细使用图文教程 什么是FreeCommander FreeCommander是一款免费的资源管理器软件,它可以用于替代Windows系统自带的资源管理器,提供更多优秀的功能和操作方式。 安装 在FreeCommander官网中下载安装包,按照提示进行安装即可。 界面介绍 FreeCommander的界面可以分为以下几个部…

    other 2023年6月26日
    00
  • JavaScript函数作用域链分析

    JavaScript函数作用域链分析攻略 JavaScript中的函数作用域链是指函数在执行过程中访问变量的一种机制。当函数被调用时,JavaScript引擎会创建一个作用域链,用于查找函数内部的变量。本攻略将详细解释函数作用域链的构建和查找过程,并提供两个示例说明。 构建函数作用域链 函数作用域链是由函数创建时的词法环境决定的。词法环境是一个记录变量和函数…

    other 2023年8月19日
    00
  • 微信小程序实现循环嵌套数据选择

    type: Array, value: [], }, }, methods: { handleChange(e) { const { value } = e.detail; const selectedItem = this.data.data[value]; const { children } = selectedItem; if (children &…

    other 2023年7月27日
    00
合作推广
合作推广
分享本页
返回顶部