JavaScript懒加载图像

懒加载图像是一种优化网页性能的技术,它将页面中的图像延迟加载,即在用户需要查看它们之前不会立即加载。这种技术通常用于处理大量或大尺寸图像的网页,特别是那些包含长页面或大量媒体内容的网站。

好处

**1. 加快页面加载速度:**懒加载允许浏览器在初次渲染页面时不必加载所有图像,而只加载用户正在浏览或者即将浏览的部分。这减少了初始页面加载所需的时间,提高了页面的整体加载速度。
**2. 节省带宽和服务器资源:**延迟加载意味着不会同时请求所有图像资源,特别是对于长页面或包含大量图像的页面,这可以显著减少服务器的负载和带宽消耗。
**3. 改善用户体验:**用户在滚动页面时,只有那些即将进入视窗的图像才会被加载,这降低了页面的初次加载时间,使用户能更快速地浏览内容,提升了用户的整体体验。
**4. 降低跳出率:**快速加载页面和减少等待时间可以降低用户的跳出率,增加页面的停留时间,有助于提高页面的SEO排名和转化率。

如何实现

图像元素(标签)的src属性设置为占位符或者空字符串,例如data-src属性来存储实际图像的URL。

实例展示

● src中存储一个模糊的,内存非常小的图片,而data-src中存储的是真实的图片
在这里插入图片描述

● 我们需要做的是通过交叉观察点的方式来懒加载图片,当图片相交时替换src,并去除相应的模糊CSS
● 首先我们获取我们想要的HTML元素存储到变量中

const imgTargets = document.querySelectorAll('img[data-src]');

● 接着将我们观察点的条件和触发相交时候要做的事情的框架写出来

const loadImg = function (entries, observer) {};const imgObserver = new IntersectionObserver(loadImg, {root: null,threshold: 0,
});

● 使用Intersection Observer API观察图像元素的进入视窗情况,并在需要时加载它们。

imgTargets.forEach(img => imgObserver.observe(img));

● 接着我们需要写当图片进入窗口后我们要做的一系列的事情

const loadImg = function (entries, observer) {const [entry] = entries;if (!entry.isIntersecting) return;//替换srcentry.target.src = entry.target.dataset.src;entry.target.addEventListener('load', function () {entry.target.classList.remove('lazy-img');})observer.unobserve(entry.target);
};

注意:将entry.target.classList.remove(‘lazy-img’);放入事件处理程序中的原因是
1. 确保图像加载完成: 在懒加载的情况下,图像的实际加载是延迟的,直到它进入视窗并且浏览器开始加载它。如果直接在 loadImg 函数中执行移除类操作,可能会在图像加载之前移除 lazy-img 类,导致 CSS 动画或其他样式效果不能正常显示。
2. 避免未加载完成时的问题: 如果 classList.remove(‘lazy-img’) 在图像加载之前执行,那么此时浏览器可能尚未设置好图像的 src 属性,也可能导致 CSS 动画或样式应用不正确,因为此时图像可能仍处于加载中状态或者尚未开始加载。
3. 确保顺序正确性: 将移除类操作放在 load 事件处理程序中可以确保在图像加载完成后立即移除 lazy-img 类。这样可以保证在图像展示给用户之前,所有必要的加载和处理步骤都已完成,从而确保用户体验的连贯性和视觉效果的正确性。

如果直接entry.target.classList.remove(‘lazy-img’);直接输出的话,用户网络缓慢的话会导致图片可能从模糊到清晰的事件很长

● 除此之外,为了不让用户感知我们图片的处理过程,我们可以加载边距,让没有滑动到图片之前按我们已经完成了图片的懒加载过程!

const imgObserver = new IntersectionObserver(loadImg, {root: null,threshold: 0,rootMargin: '200px',
});

完整代码如下

//懒加载图像
const imgTargets = document.querySelectorAll('img[data-src]');const loadImg = function (entries, observer) {const [entry] = entries;if (!entry.isIntersecting) return;//替换srcentry.target.src = entry.target.dataset.src;entry.target.addEventListener('load', function () {entry.target.classList.remove('lazy-img');})observer.unobserve(entry.target);
};const imgObserver = new IntersectionObserver(loadImg, {root: null,threshold: 0,rootMargin: '200px',
});imgTargets.forEach(img => imgObserver.observe(img));

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40607.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

视频监控平台web客户端的免密查看视频页:在PC浏览器上如何调试手机上的前端网页(PC上的手机浏览器的开发者工具)

目录 一、手机上做前端页面开发调试 1、背景 2、视频监控平台AS-V1000的视频分享页 3、调试手机前端页面代码的条件 二、手机端的准备工作 1、手机准备 2、手机的开发者模式 3、PC和手机的连接 (1)进入调试模式 (2)选择…

#数据结构 笔记三

二叉树 1. 概念 二叉树Binary Tree是n个结点的有限集合。它或者是空集n0,或者是由一个根结点以及两颗互不相交、分别称为左子树和右子树的二叉树组成。 二叉树与普通有序树不同,二叉树严格区分左子和右子,即使只有一个子结点也要区分左右。…

React@16.x(47)路由v5.x(12)源码(4)- 实现 Route

目录 1&#xff0c;原生 Route 的渲染内容2&#xff0c;实现 1&#xff0c;原生 Route 的渲染内容 对如下代码来说&#xff1a; import { BrowserRouter as Router, Route } from "react-router-dom"; function News() {return <div>News</div>; }func…

Python中的双向哈希表(双向字典)

我们知道Python中的数据结构中的字典&#xff0c;它以键&#xff1a;值对的形式保存数据。在本文中&#xff0c;我们将讨论Python中的双向哈希表或双向字典。我们可以说一个双向字典可以表示为键的值。双向字典的一个例子是&#xff1a; 示例&#xff1a; dict{ 1 : Apple , …

【虚拟机】虚拟机网络无法访问问题【已解决】

【虚拟机】虚拟机无法上网问题【已解决】 问题探究解决方法法1&#xff1a;查看相关“网络服务”是否处于正常启动状态法2&#xff1a;重启网络法3&#xff1a;重新安装VMWare法4&#xff1a;使用NAT模式&#xff0c;每次打开win7都没连上网的解决办法 问题探究 安装了很多个虚…

Git 使用问题

Git 使用问题 1, 网络问题 1, 网络问题 # 报错如下&#xff1a; fatal: unable to access https://github.com/xianglingliwei/HRNet.git/: Failed to connect to github.com port 443 after 21044 ms: Couldnt connect to server在不能正常访问Github的区域&#xff0c;需要设…

上位机图像处理和嵌入式模块部署(mcu项目1:实现协议)

【 声明&#xff1a;版权所有&#xff0c;欢迎转载&#xff0c;请勿用于商业用途。 联系信箱&#xff1a;feixiaoxing 163.com】 这种mcu的嵌入式模块理论上都是私有协议&#xff0c;因为上位机和下位机都是自己开发的&#xff0c;所以只需要自己保证上、下位机可以通讯上&…

Feign 原理流程图练习-01

目录 作业: 老师给的参考流程图 要求 解答 知识扩展 Feign基础原理 接口定义 代理对象生成 请求调用 请求发送 响应处理 容错与熔断 总结 作业: 老师给的参考流程图 pdf版本 【金山文档 | WPS云文档】 Feign https://kdocs.cn/l/ctbagIyxN348 ​ 要求 结合上面…

基于Redisson实现分布式锁

基于redisson实现分布式锁 之前背过分布式锁几种实现方案的八股文&#xff0c;但是并没有真正自己实操过。现在对AOP有了更深一点的理解&#xff0c;就自己来实现一遍。 1、分布式锁的基础知识 分布式锁是相对于普通的锁的。普通的锁在具体的方法层面去锁&#xff0c;单体应…

大模型提问中包括时间的实战方案

大家好,我是herosunly。985院校硕士毕业,现担任算法研究员一职,热衷于机器学习算法研究与应用。曾获得阿里云天池比赛第一名,CCF比赛第二名,科大讯飞比赛第三名。拥有多项发明专利。对机器学习和深度学习拥有自己独到的见解。曾经辅导过若干个非计算机专业的学生进入到算法…

班迪录屏(Bandicam)7.0下载以及安装教程

最近有小伙伴私信我&#xff0c;问我有没有好用的录屏工具&#xff0c;今天给大家分享一个我一直在使用的录屏工具&#xff0c;也是解锁了V1P版本&#xff0c;绿色版打开就可以使用~ Bandicam录屏&#xff08;PC&#xff09; Bandicam录屏是一款专为捕捉屏幕精彩瞬间而设计的…

PHP家政服务预约单开版微信小程序系统源码

&#x1f3e0; —— 便捷生活&#xff0c;从指尖开始&#x1f4aa; &#x1f308;【开篇&#xff1a;家政新风尚&#xff0c;一键触达】 在忙碌的生活节奏中&#xff0c;你是否渴望拥有一个温馨、整洁的家&#xff0c;却又苦于找不到合适的家政服务&#xff1f;现在&#xff…

结合Langchain来开发一个能够通过POST请求获取GPT回答的智能体

结合Langchain来开发一个能够通过POST请求获取GPT回答的智能体可以按照以下步骤进行。这个过程包括配置Langchain以利用外部API进行响应、设计流数据处理以及搭建一个简单的智能体来处理请求和回复。下面是一个详细的指南。 步骤 1: 安装必要的库 确保安装了Langchain和相关的…

总结:Flink任务执行

一、背景 一直很好奇,Flink是如何运行我们的java类任务的,今天先记录下。 二、步骤 1、项目中添加Maven 依赖项 <dependencies><!-- Flink Core --><dependency><groupId>org.apache.flink</groupId><artifactId>flink-java</arti…

EXTI寄存器,AFIO的简洁,EXTI配置的流程

一&#xff0c;AFIO简介 AFIO是Alternate Function Input/Output 的缩写&#xff0c;表示复用功能IO&#xff0c;主要用于实现IO端口的复用功能以及外部中断的控制 STM32外设有很多I/O以及内置外设&#xff08;如12C&#xff0c;ADC,ISP,USART等&#xff09;。为节省引出管脚的…

初试成绩占比百分之70!计算机专硕均分340+!华中师范大学计算机考研考情分析!

华中师范大学&#xff08;Central China Normal University&#xff09;简称“华中师大”或“华大”&#xff0c;位于湖北省会武汉&#xff0c;是中华人民共和国教育部直属重点综合性师范大学&#xff0c;国家“211工程”、“985工程优势学科创新平台”重点建设院校&#xff0c…

MySQL 日期和时间函数知识点总结

引言 在数据库管理和开发中&#xff0c;日期查询是一项基础且频繁使用的功能。MySQL提供了丰富的日期和时间处理函数&#xff0c;使得我们能够灵活地进行日期查询和数据处理。本文将详细介绍MySQL中关于日期查询的几个重要知识点&#xff0c;并附上具体的案例。 1. MySQL的日…

PhysioLLM 个性化健康洞察:手表可穿戴设备实时数据 + 大模型

个性化健康洞察&#xff1a;可穿戴设备实时数据 大模型 提出背景PhysioLLM 图PhysioLLM 实现数据准备用户模型和洞察生成个性化数据总结和洞察是如何生成的&#xff1f; 解析分析 提出背景 论文&#xff1a;https://arxiv.org/pdf/2406.19283 虽然当前的可穿戴设备伴随应用&…

最近,被“AI”狠狠刷屏了......

最近&#xff0c;被“AI”狠狠刷屏了。 作为时下最热门的话题&#xff0c;AI画图、AI配音、AI写文案、AI做视频......AI在最近两年可谓是火遍全球。ChatGPT、Midjourney和SORA等技术不断涌现&#xff0c;不仅深刻改变着我们的生活方式&#xff0c;也推动了AI技术的飞速发展。 …

vue使用scrollreveal和animejs实现页面滑动到指定位置后再开始执行动画效果

效果图 效果链接&#xff1a;http://website.livequeen.top 介绍 一、Scrollreveal ScrollReveal 是一个 JavaScript 库&#xff0c;用于在元素进入/离开视口时轻松实现动画效果。 ScrollReveal 官网链接&#xff1a;ScrollReveal 二、animejs animejs是一个好用的动画库…