JS | 如何使用 JavaScript 实现图片懒加载的淡入效果?

在现代的网页设计中,为了提高用户体验和网站性能,图片懒加载已经成为一个常见的技术。图片懒加载可以减少初始加载时间,延迟加载图片直到用户滚动到它们所在的位置。另外,为了进一步提升用户体验,添加淡入效果可以使页面更加平滑和吸引人。在本文中,我们将学习如何使用JavaScript实现图片懒加载的淡入效果。

第一步是确定哪些图片需要延迟加载。通常,我们将 img 标签的 src 属性设置为空,然后将真实的图片地址保存在一个自定义属性中,比如 data-src。这样在页面加载时,图片不会被加载,只有当用户滚动到图片所在位置时,才会加载真实的图片地址并进行渲染。

<img class="lazy-img" data-src="path/to/image.jpg" src="" alt="Lazy Image">

接下来,我们需要添加一些JavaScript代码来实现懒加载效果。我们将对用户滚动事件进行监听,并检查哪些图片位于可视区域内。对于可视区域内的图片,我们将其真实地址(即data-src属性的值)赋给src属性,从而实现图片的加载。

// 获取所有拥有lazy-img类的图片元素
const lazyImages = document.querySelectorAll('.lazy-img');// 监听用户滚动事件
window.addEventListener('scroll', function() {// 循环遍历所有图片元素for (let i = 0; i < lazyImages.length; i++) {// 检查图片元素是否在可视区域内if (isInViewport(lazyImages[i])) {// 将真实的图片地址赋给src属性lazyImages[i].src = lazyImages[i].getAttribute('data-src');// 添加淡入效果lazyImages[i].classList.add('fade-in');}}
});// 检查元素是否在可视区域内的函数
function isInViewport(element) {const rect = element.getBoundingClientRect();return (rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth));
}

在上面的代码中,我们使用了一个 isInViewport() 函数来检查图片元素是否在可视区域内。该函数通过调用 getBoundingClientRect() 方法来获取元素的位置信息,并与窗口的高度和宽度进行比较。如果元素在可视区域内,则返回true。

最后,我们还可以为图片添加淡入效果,使其在加载完成后平滑地显示在页面上。我们为图片元素添加一个fade-in类,这样在图片加载完成后,会触发CSS过渡效果,从而实现淡入的动画效果。

.lazy-img {opacity: 0;transition: opacity 0.3s ease-in;
}.lazy-img.fade-in {opacity: 1;
}

在上述代码中,我们通过初始将图片的不透明度设置为0,然后使用CSS过渡效果将其逐渐过渡到完全不透明(即1)。此过程持续时间为0.3秒,并以渐入的方式进行。

通过以上步骤,我们可以通过JavaScript来实现图片懒加载的淡入效果。这不仅可以提高网站性能和用户体验,还可以使网站看起来更加平滑和吸引人。

 示例2

document.addEventListener('DOMContentLoaded', function() {var lazyImages = [].slice.call(document.querySelectorAll('img[data-src]'));if ('IntersectionObserver' in window) {let lazyImageObserver = new IntersectionObserver(function(entries, observer) {entries.forEach(function(entry) {if (entry.isIntersecting) {let lazyImage = entry.target;lazyImage.src = lazyImage.dataset.src;lazyImage.classList.add('fade-in');lazyImageObserver.unobserve(lazyImage);}});});lazyImages.forEach(function(lazyImage) {lazyImageObserver.observe(lazyImage);});} else {// 回退方案:简单的onload加载lazyImages.forEach(function(lazyImage) {lazyImage.src = lazyImage.dataset.src;});}
});// CSS 示例
/* 淡入效果 */
.fade-in {transition: opacity 1s;opacity: 0;
}/* 图片加载后的样式 */
.fade-in[src] {opacity: 1;
}

关于:[].slice.call( arguments)
 

[].slice.call(document.querySelectorAll('selector')).forEach((el)=>{...})

它的目的:将arguments对象的数组提出来转化为数组,arguments本身并不是数组而是类数组对象;

它的用处:document.querySelectorAll()选择出来的伪数组需要遍历时,调用这个方法来将伪数组转化为数组,然后调用forEach方法来遍历。

这段代码使用了IntersectionObserver来监听图片何时进入视口,并触发图片的懒加载。如果浏览器不支持IntersectionObserver,则会加载所有图片,并没有懒加载效果。同时,它还为图片添加了一个fade-in类,该类在CSS中定义了一个淡入效果。这样,当图片加载完成后,会有一个淡入的过渡效果。

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

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

相关文章

【忍无可忍,无需再忍】永久解决xshell or xftp 更新问题

1 背景介绍 提示“要继续使用此程序,您必须应用最新的更新或使用新版本”&#xff0c;笔者版本是xshell 6 距离一段时间不使用&#xff0c;或者遇到更新场景&#xff0c;总是会弹出这个框&#xff0c;实在是忍无可忍&#xff0c;无需再忍。 2 思路介绍 笔者上一篇关于如何解…

学习的内核,如何更好的学习呢?

文章目录 三步学习法起因&#xff1a;三步学习法是什么&#xff1f;三步学习法为什么&#xff1f;我自己的实例 三步学习法应该怎么办&#xff1f;总结&#xff1a; 三步学习法 起因&#xff1a; 今天在学习黑马的java设计模式&#xff0c;我会觉得我的学习进度很慢&#xff0…

MAVlink协议 部分通用消息集解析

文章目录 MAVLink是一种非常轻量级的消息传输协议, 用于地面控制终端&#xff08;地面站&#xff09;与无人机之间 (以及机载无人机组件之间) 进行通信&#xff0c; 为一种设计用于资源受限系统及带宽受限链路的二进制遥测协议。 HEARTBEAT 检测信号消息显示系统或组件存在并正…

【32】C++流

C流 IO: 向设备输入数据和输出数据 C的IO流 设备: 文件控制台特定的数据类型(stringstream) c中,必须通过特定的已经定义好的类, 来处理IO(输入输出) 读写文件&#xff1a;文件流 文件流: 对文件进行读写操作 头文件: <fstream> 类库: ifstream 对文件输入&am…

C#基础知识-枚举

目录 枚举 1.分类 1.1普通枚举 1&#xff09;默认情况 2&#xff09;指定起始值 1.2标志枚举&#xff08;Flag Enum&#xff09; 位运算符与标志枚举 1&#xff09;组合标志 2&#xff09;检查标志 2.枚举与不同类型之间的转换 1&#xff09;枚举->整型 2&#…

深度学习调参大法

目录 trick 1&#xff1a;深度学习调参核心点trick 2&#xff1a;关于 深度学习Model选型问题trick 3&#xff1a;关于数据trick 4&#xff1a;关于调参 4.1 关于 Loss function 调参策略4.2 关于 Learning rate 和 batch size 调参策略4.3 关于 Epoch number 和 early stoppi…

数据结构模板代码合集(不完整)

P3368 【模板】树状数组 2 #include <bits/stdc.h> using namespace std; const int maxn 5e5 7;int n, m, s, t; int ans; int a[maxn]; struct node{int l, r;int num; }tr[maxn * 4];void build(int p, int l, int r){tr[p] {l, r, 0};if(l r){tr[p].num a[l];r…

TCP全连接队列与 tcpdump 抓包

&#x1f351;个人主页&#xff1a;Jupiter. &#x1f680; 所属专栏&#xff1a;计算机网络高效通关之路 欢迎大家点赞收藏评论&#x1f60a; 目录 listen第二个参数详解 全连接队列与半连接队列半开放连接队列&#xff08;SYN队列&#xff09;全连接队列&#xff08;接受队列…

【MySQL】C语言连接MySQL数据库3——事务操作和错误处理API

目录 1.MySQL事务处理机制 1.1.autocommit 1.2.autocommit的设置与查看 1.3.使用示例 2.事务操作API 2.1.设置事务提交模式——mysql_autocommit() 2.2.提交事务——mysql_commit() 2.3.事务回滚——mysql_rollback() 3.错误处理的API 3.1.返回错误的描述——mysql_er…

15.6 JDBC数据库编程6——可滚动和可更新的ResultSet

目录 15.6 引言 15.6.1 可滚动的ResultSet 15.6.1 可更新的ResultSet 15.6 引言 可滚动的ResultSet是指在结果集对象上不但可以向前访问结果集中的记录&#xff0c;还可以向后访问结果集中记录。可更新的ResultSet是指不但可以访问结果集中的记录&#xff0c;还可以更新…

关于移动硬盘复制文件0x80071AC3错误解决方法

一、问题详情 新入手的西部数据移动硬盘在复制文件到手机是没有问题的&#xff0c;但是在电脑复制文件的时候&#xff0c;电脑弹出0x80071AC3错误&#xff0c;没办法复制文件&#xff0c;也没办法新建文件夹。 二、原因 因为卷有问题&#xff0c;请运行chkdsk并重试。 三、解…

使用Vue.js构建响应式Web应用

&#x1f496; 博客主页&#xff1a;瑕疵的CSDN主页 &#x1f4bb; Gitee主页&#xff1a;瑕疵的gitee主页 &#x1f680; 文章专栏&#xff1a;《热点资讯》 使用Vue.js构建响应式Web应用 1 引言 2 Vue.js简介 3 安装Vue CLI 4 创建Vue项目 5 设计应用结构 6 创建组件 7 使用…

SLAM|1. 相机投影及相机畸变

一个能思考的人&#xff0c;才真是一个力量无边的人。——巴尔扎克 本章主要内容&#xff1a; 1.针孔相机模型 2.相机成像的几个坐标系图像 3.畸变及相机标定 本节主要介绍在照相机拍摄过程中&#xff0c;现实物体如何跟照片上的像素关联起来&#xff0c;具体涉及相机成像的物…

LabVIEW换流变换器智能巡检系统

基于LabVIEW的换流变换器智能巡检系统通过自动化检测和数据分析&#xff0c;提高换流变换器的运行效率和可靠性&#xff0c;降低人工维护成本。 项目背景&#xff1a; 换流变压器作为电力系统的重要组成部分&#xff0c;其性能的可靠性直接影响到整个电网的稳定运行。然而&…

Spring Boot:植物健康的智能守护者

2相关技术 2.1 MYSQL数据库 MySQL是一个真正的多用户、多线程SQL数据库服务器。 是基于SQL的客户/服务器模式的关系数据库管理系统&#xff0c;它的有点有有功能强大、使用简单、管理方便、安全可靠性高、运行速度快、多线程、跨平台性、完全网络化、稳定性等&#xff0c;非常…

Python基于amazon/chronos-t5-base的预训练模型离线对时间系列数据的未来进行预测

Python基于预训练模型对时间系列数据的未来进行预测 导入库 %matplotlib inline import matplotlib.pyplot as plt import numpy as np import pandas as pd import torch from chronos import ChronosPipeline from tqdm.auto import tqdm from autogluon.timeseries import…

【Java】使用iText依赖生成PDF文件

文章目录 使用iText实现PDF文件生成1. 需求2 . 添加依赖3. 核心4. 实战案例&#xff1a;生成录用通知书4.1 整体架构4.2 初始化PDF文档4.3 配置中文字体4.4 添加背景图片4.5 添加文本内容4.6 处理文档生成 5. 关键技巧与注意事项5.1 字体处理5.2 图片处理5.3 布局控制5.4 异常处…

探索人工智能在自然语言处理中的应用

探索人工智能在自然语言处理中的应用 前言1. 机器翻译2. 情感分析3. 智能客服4. 文本生成未来展望 结语 前言 在信息爆炸的时代&#xff0c;自然语言处理&#xff08;NLP&#xff09;作为人工智能&#xff08;AI&#xff09;的一个重要分支&#xff0c;正以前所未有的速度改变着…

LabVIEW提高开发效率技巧----节省内存

在LabVIEW开发过程中&#xff0c;内存管理是保障程序稳定性和性能的关键。本文将详细介绍如何通过队列处理来节省内存&#xff0c;尤其是如何通过解耦释放不再需要的数据&#xff0c;防止内存泄漏。通过多个实际例子&#xff0c;从不同角度探讨队列处理在大数据量或长时间运行的…

苹果瑕疵数据集苹果质量数据集YOLO格式VOC格式 深度学习 目标检测 数据集

一、数据集概述 数据集名称&#xff1a;2类苹果图像数据集 数据集包含两类样本&#xff1a;正常苹果和有瑕疵的苹果。正常苹果样本代表完好的苹果&#xff0c;而有瑕疵的苹果样本代表苹果表面可能存在的损伤、瑕疵或病害。每个样本都经过详细标记和描述&#xff0c;以便训练模…