html懒人加载实现

在HTML中,懒加载(Lazy Load)是一种延迟加载图片或其他资源的技术,它可以提高页面的加载速度和性能。下面是一种实现懒加载的方法:

  1. 设置默认占位图片:在HTML中,为要延迟加载的图片设置一个默认的占位符图片,它将在图片加载之前显示。
    <img src="placeholder.jpg" data-src="image.jpg" alt="Lazy Load Image">

  2. 添加JavaScript代码:为了实现懒加载,我们需要使用JavaScript来检测图片是否在视口(Viewport)中可见,如果是则加载实际图片。
    document.addEventListener("DOMContentLoaded", function() {var lazyImages = [].slice.call(document.querySelectorAll("img[data-src]"));if ("IntersectionObserver" in window) {var lazyImageObserver = new IntersectionObserver(function(entries, observer) {entries.forEach(function(entry) {if (entry.isIntersecting) {var lazyImage = entry.target;lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove("lazy");lazyImageObserver.unobserve(lazyImage);}});});lazyImages.forEach(function(lazyImage) {lazyImageObserver.observe(lazyImage);});} else {// 如果浏览器不支持Intersection Observer,则简单地将所有的图片加载lazyImages.forEach(function(lazyImage) {lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove("lazy");});}
    });

    此JavaScript代码使用Intersection Observer API(如果浏览器支持)来观察图片是否在视口中可见。如果图片可见,则将实际图片的URL赋值给src属性,并从lazy类中移除。如果浏览器不支持Intersection Observer,那么它会简单地将所有图片加载出来。 3. 样式调整:为了更好地展示懒加载效果,你可以为占位符图片和实际图片添加一些样式。

    img {max-width: 100%;height: auto;display: block;
    }
    .lazy {filter: blur(5px); /* 可选:模糊效果 */opacity: 0.5; /* 可选:透明度降低 */
    }

    以上是一种实现懒加载的方法。当页面滚动或重新调整大小时,图片将根据它们在视口中的可见性自动加载。 请注意,懒加载并不局限于图片,你也可以将它应用于其他需要延迟加载的资源,比如视频或音频文件

   完整代码

<!DOCTYPE html>
<html>
<head><title>Lazy Load</title><style>img {max-width: 100%;height: auto;display: block;}.lazy {filter: blur(5px); /* 可选:模糊效果 */opacity: 0.5; /* 可选:透明度降低 */}</style>
</head>
<body>
<h1>Lazy Load Example</h1>
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img1.baidu.com/it/u=422078137,1307526884&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img2.baidu.com/it/u=2546424698,318222608&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img1.baidu.com/it/u=422078137,1307526884&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img1.baidu.com/it/u=422078137,1307526884&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img2.baidu.com/it/u=2546424698,318222608&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img1.baidu.com/it/u=3622442929,3246643478&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img1.baidu.com/it/u=422078137,1307526884&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img2.baidu.com/it/u=2546424698,318222608&fm=253&fmt=auto&app=138&f=JPEG?w=889&h=500" alt="Lazy Load Image" class="lazy">
<img src="https://preview.qiantucdn.com/58pic/36/28/63/18558PICu3b842hxJc6mW_PIC2018.gif!w1024_new_small" data-src="https://img2.baidu.com/it/u=2312383180,3750420672&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800" alt="Lazy Load Image" class="lazy"><script>document.addEventListener("DOMContentLoaded", function() {var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));if ("IntersectionObserver" in window) {var lazyImageObserver = new IntersectionObserver(function(entries, observer) {entries.forEach(function(entry) {if (entry.isIntersecting) {var lazyImage = entry.target;lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove("lazy");lazyImageObserver.unobserve(lazyImage);}});});lazyImages.forEach(function(lazyImage) {lazyImageObserver.observe(lazyImage);});} else {lazyImages.forEach(function(lazyImage) {lazyImage.src = lazyImage.dataset.src;lazyImage.classList.remove("lazy");});}});
</script>
</body>
</html>

实现效果

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

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

相关文章

react-next. 配置title信息

文档&#xff1a;元数据 1、静态数据 import type { Metadata } from nextexport const metadata: Metadata {title: ...,description: ..., }export default function Page() {} 2、动态数据 import type { Metadata, ResolvingMetadata } from nexttype Props {params:…

力扣190. 颠倒二进制位

位运算 思路&#xff1a; 逐位颠倒&#xff0c;第 i 位二进制移动到 (31 - i) 位上 result | (n & 1) << (31 - i); class Solution { public:uint32_t reverseBits(uint32_t n) {uint32_t result 0;for (int i 0; i < 32 && n > 0; i) {result | (…

实验记录:深度学习模型收敛速度慢有哪些原因

深度学习模型收敛速度慢有哪些原因&#xff1f; 学习率设置不当&#xff1a; 学习率是算法中一个重要的超参数&#xff0c;它控制模型参数在每次迭代中的更新幅度。如果学习率过大&#xff0c;可能会导致模型在训练过程中的振荡&#xff0c;进而影响到收敛速度&#xff1b;如果…

【Windows】windows11右键默认显示更多选项的办法

Windows11系统的右键菜单显示&#xff0c;需要多点一次“显示更多选项”才能看到所有菜单内容&#xff0c;按下面步骤简单设置一下就能恢复成Windows经典的右键菜单显示。 1. 2.输入命令【reg.exe add "HKCU\Software\Classes\CLSID\{86ca1aa0-34aa-4e8b-a509-50c905bae2a…

React与AJAX

大家好&#xff0c;欢迎来到 《React与AJAX》 课程。在这一课中&#xff0c;我们将学习如何在 React 中使用 AJAX。 什么是 AJAX&#xff1f; AJAX&#xff08;Asynchronous JavaScript and XML&#xff09;是一种使用 JavaScript 在浏览器和服务器之间进行异步通信的技术。A…

Redis - RDB与AOF持久化技术

Redis 持久化技术 RDB 是默认持久化方式&#xff0c;但 Redis 允许 RDB 与 AOF 两种持久化技术同时 开启&#xff0c;此时系统会使用 AOF 方式做持久化&#xff0c;即 AOF 持久化技术的优先级要更高。同样的道 理&#xff0c;两种技术同时开启状态下&#xff0c;系…

css的元素显示模式(有单行文字垂直居中,侧边栏等案例)

目录 1. 什么是元素的显示模式 2. 元素显示模式的类型 块元素 行内元素 行内块元素 3. 元素显示模式的转换 4.文字垂直居中 5.具体实现案例 1. 什么是元素的显示模式 定义&#xff1a;元素显示模式就是元素&#xff08;标签&#xff09;以什么方式进行显示&#xff0c;…

Mysql 压测

目录 1、mysql查看数据大小 2、mysql配置优化 3、mysql压力测试 4、mysql主从复制原理 5、mysql主从延迟如何解决 6、主从切换操作 1、mysql查看数据大小 怎样查询总数据量 SELECT table_schema AS Database,CONCAT(ROUND(SUM((data_length index_length) / (1024 * 102…

HarmonyOS鸿蒙应用开发——数据持久化Preferences封装

文章目录 数据持久化简述基本使用与封装测试用例参考 数据持久化简述 数据持久化就是将内存数据通过文件或者数据库的方式保存到设备中。HarmonyOS提供两两种持久化方案&#xff1a; Preferences&#xff1a;主要用于保存一些配置信息&#xff0c;是通过文本的形式存储的&…

TCP/IP详解——FTP 协议,Telnet协议

文章目录 1. FTP 协议1.1 FTP的应用1.2 FTP传输文件的过程1.3 FTP传输模式1.4 主动模式&#xff08;Active Mode&#xff09;1.5 Active Mode 抓包分析1.6 被动模式&#xff08;Passive Mode&#xff09;1.7 Passive Mode 抓包分析 2. Telnet 协议2.1 Telnet 概念2.2 Telnet 协…

【网络安全】网络防护之旅 - Java安全机制探秘与数字证书引爆网络防线

&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《网络安全之道 | 数字征程》⏰墨香寄清辞&#xff1a;千里传信如电光&#xff0c;密码奥妙似仙方。 挑战黑暗剑拔弩张&#xff0c;网络战场誓守长。 目录 &#x1f608;1. 初识网络安…

android tv no ad desktop

1. TV xiaomi tv, too many ad and boring destktop. 小米电视去广告及更换第三方桌面操作方法 – MIUI历史版本 2. com.yanggqi.rom.launcher.free.apk. 3. ADB : 注意&#xff0c; adb connect 192.168.0.50 ,无法认证时&#xff0c;要把电视界面返回到上一级才能看到那个…

Web前端-CSS(文本样式)

文章目录 1.font字体1.1 font-size:大小1.2 font-family:字体1.3 font-weight:字体粗细1.4 font-style:字体风格1.5 font总结 2. css外观属性2.1 color:文本颜色2.2 text-align:文本水平对齐方式2.3 line-height:行间距2.4 text-indent:首行缩进2.5 text-decoration 文本的装饰…

挑战52天学小猪佩奇笔记--day25

52天学完小猪佩奇--day25 ​【本文说明】 本文内容来源于对B站UP 脑洞部长 的系列视频 挑战52天背完小猪佩奇----day25 的视频内容总结&#xff0c;方便复习。强烈建议大家去关注一波UP&#xff0c;配合UP视频学习。 注&#xff1a;这集开始变成一段一段的猜台词&#xff0c;加…

代码随想Day39 | 62.不同路径、63. 不同路径 II

62.不同路径 每次向右或者向下走两个选择&#xff0c;定义dp数组dp[i][j] 为到达索引ij的路径和&#xff0c;状态转移公式为 dp[i][j]dp[i-1][j]dp[i][j-1]&#xff0c;初始状态的第一行和第一列为1&#xff0c;从左上到右下开始遍历即可。详细代码如下&#xff1a; class Sol…

git push origin master

1、在github上面新建一个仓库&#xff0c;仓库名称就是项目总的名称&#xff0c;里面不要放置任何东西&#xff0c;包括README.md&#xff0c;然后复制仓库的地址 2、在本地项目名称下面的文件夹里面点击鼠标右键&#xff0c;然后点击Git Bash Here 3、使用git init去把这个目…

03 Vue3中的生命周期函数

概述 The Vue component lifecycle events happen during a component’s lifecycle, from creation to deletion. They allow us to add callbacks and side effects at each stage of the component’s life when necessary. Vue 组件生命周期事件发生在组件从创建到删除的…

跟着官网学 Vue - 透传 Attributes

MyButton.vue 这是子组件&#xff0c;它是一个包含按钮的简单组件。它有一个按钮&#xff0c;当按钮被点击时&#xff0c;会触发 handleClick 方法。MyButton 组件中禁用了属性继承&#xff0c;以避免多次触发点击事件。 <!-- MyButton.vue --> <template><!-…

LeetCode day26

LeetCode day26 LCR 189. 设计机械累加器 请设计一个机械累加器&#xff0c;计算从 1、2… 一直累加到目标数值 target 的总和。注意这是一个只能进行加法操作的程序&#xff0c;不具备乘除、if-else、switch-case、for 循环、while 循环&#xff0c;及条件判断语句等高级功能…

Java并发(十九)----Monitor原理及Synchronized原理

1、Java 对象头 以 32 位虚拟机为例 普通对象 |--------------------------------------------------------------| | Object Header (64 bits) | |------------------------------------|-------------------------| | Mark W…