当前位置: 开发笔记 > 编程语言 > 正文

手写图片懒加载+防抖优化

作者：王文大博士_924 | 来源：互联网 | 2023-06-05 01:38

图片的懒加载，实现步骤在img标签上注入自定义(该例子中为real-src)的图片真实路径，初始可以为loading图片当图片满足一定条件(图片在视口中)时动态替换图片的src 以

图片的懒加载，实现步骤

在img标签上注入自定义(该例子中为real-src)的图片真实路径，初始可以为loading图片

当图片满足一定条件(图片在视口中)时动态替换图片的src

以下是源码↓↓↓↓↓↓

html部分，这里主要讲图片懒加载实现，样式请自行完善

1
2

class="container">
3

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=123213" alt="">
4

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=4453" alt="">
5

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=65854" alt="">
6

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=6534746" alt="">
7

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=23426" alt="">
8

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=466785" alt="">
9

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=784" alt="">
10

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=23423" alt="">
11

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=567567" alt="">
12

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=67964" alt="">
13

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=3467" alt="">
14

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=45846" alt="">
15

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=3574" alt="">
16

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=2357" alt="">
17

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=457456" alt="">
18

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=457" alt="">
19

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=235" alt="">
20

"./assets/images/loading.jpg" real-src="https://picsum.photos/500/473?_t=56865" alt="">
21

使用 https://picsum.photos 生成随机图片。https://picsum.photos/500/473表示请求一张500x473的图片，后面必须加上唯一的随机数，不然图片请求只有一张，不能达到我们要的效果。

Javascript部分。监听页面滚动事件（防抖处理），判断条件动态修改img的src

推荐阅读

python
2018年人工智能大数据的爆发，学Java还是Python？

本文介绍了2018年人工智能大数据的爆发以及学习Java和Python的相关知识。在人工智能和大数据时代，Java和Python这两门编程语言都很优秀且火爆。选择学习哪门语言要根据个人兴趣爱好来决定。Python是一门拥有简洁语法的高级编程语言，容易上手。其特色之一是强制使用空白符作为语句缩进，使得新手可以快速上手。目前，Python在人工智能领域有着广泛的应用。如果对Java、Python或大数据感兴趣，欢迎加入qq群458345782。 ... [详细]

蜡笔小新 2023-12-14 20:08:28
default
Android 新闻App的本地服务器搭建教程

本文介绍了在开发Android新闻App时，搭建本地服务器的步骤。通过使用XAMPP软件，可以一键式搭建起开发环境，包括Apache、MySQL、PHP、PERL。在本地服务器上新建数据库和表，并设置相应的属性。最后，给出了创建new表的SQL语句。这个教程适合初学者参考。 ... [详细]

蜡笔小新 2023-12-14 17:15:19
main
Java实现大数乘法（分治算法）

本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]

蜡笔小新 2023-12-14 15:43:50
main
实现下拉列表，点击其他位置自动隐藏效果的三种方式比较

目录实现效果：实现环境实现方法一：基本思路主要代码JavaScript代码总结方法二主要代码总结方法三基本思路主要代码JavaScriptHTML总结实 ... [详细]

蜡笔小新 2023-12-14 15:03:14
main
求解hdu 1003 java题目的动态规划优化方法

本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]

蜡笔小新 2023-12-14 13:11:00
jar
SpringBoot yml 配置多配置文件,开发环境,生产环境配置文件分开

原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中，有两种配置文件，一种 ... [详细]

蜡笔小新 2023-12-14 12:39:13
post
Webmin远程命令执行漏洞复现及防护方法

本文介绍了Webmin远程命令执行漏洞CVE-2019-15107的漏洞详情和复现方法，同时提供了防护方法。漏洞存在于Webmin的找回密码页面中，攻击者无需权限即可注入命令并执行任意系统命令。文章还提供了相关参考链接和搭建靶场的步骤。此外，还指出了参考链接中的数据包不准确的问题，并解释了漏洞触发的条件。最后，给出了防护方法以避免受到该漏洞的攻击。 ... [详细]

蜡笔小新 2023-12-13 16:14:53
post
2020年第十一届蓝桥杯决赛JAVA B G题“皮亚诺曲线距离“的个人题解目录

本文是2020年第十一届蓝桥杯决赛JAVA B G题“皮亚诺曲线距离“的个人题解目录。文章介绍了皮亚诺曲线的概念和特点，并提供了计算皮亚诺曲线上两点距离的方法。通过给定的两个点的坐标，可以计算出它们之间沿着皮亚诺曲线走的最短距离。本文还提供了个人题解的目录，供读者参考。 ... [详细]

蜡笔小新 2023-12-13 13:20:43
post
Oracle优化新常态的五大禁止及其性能隐患

本文介绍了Oracle优化新常态中的五大禁止措施，包括禁止外键、禁止视图、禁止触发器、禁止存储过程和禁止JOB，并分析了这些禁止措施可能带来的性能隐患。文章还讨论了这些禁止措施在C/S架构和B/S架构中的不同应用情况，并提出了解决方案。 ... [详细]

蜡笔小新 2023-12-12 12:55:55
post
JavaScript疑难杂症系列相称性推断的知识点详解

本文详细解析了JavaScript中相称性推断的知识点，包括严厉相称和宽松相称的区别，以及范例转换的规则。针对不同类型的范例值，如差别范例值、统一类的原始范例值和统一类的复合范例值，都给出了具体的比较方法。对于宽松相称的情况，也解释了原始范例值和对象之间的比较规则。通过本文的学习，读者可以更好地理解JavaScript中相称性推断的概念和应用。 ... [详细]

蜡笔小新 2023-12-14 19:12:10
python
开发笔记:加密&json&StringIO模块&BytesIO模块

篇首语：本文由编程笔记#小编为大家整理，主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识，希望对你有一定的参考价值。一、加密加密 ... [详细]

蜡笔小新 2023-12-14 15:18:35
main
HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]

蜡笔小新 2023-12-14 15:08:18
main
Android中高级面试必知必会，积累总结

本文介绍了Android中高级面试的必知必会内容，并总结了相关经验。文章指出，如今的Android市场对开发人员的要求更高，需要更专业的人才。同时，文章还给出了针对Android岗位的职责和要求，并提供了简历突出的建议。 ... [详细]

蜡笔小新 2023-12-14 14:53:02
main
Metasploit攻击渗透实践

本文介绍了Metasploit攻击渗透实践的内容和要求，包括主动攻击、针对浏览器和客户端的攻击，以及成功应用辅助模块的实践过程。其中涉及使用Hydra在不知道密码的情况下攻击metsploit2靶机获取密码，以及攻击浏览器中的tomcat服务的具体步骤。同时还讲解了爆破密码的方法和设置攻击目标主机的相关参数。 ... [详细]

蜡笔小新 2023-12-14 12:14:09
main
[大整数乘法] java代码实现

本文介绍了使用java代码实现大整数乘法的过程，同时也涉及到大整数加法和大整数减法的计算方法。通过分治算法来提高计算效率，并对算法的时间复杂度进行了研究。详细代码实现请参考文章链接。 ... [详细]

蜡笔小新 2023-12-13 11:21:32

王文大博士_924

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章