4-2 如何延迟加载图片

已于 2022-03-23 18:07:55 修改
阅读量585 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端知识加深 文章标签： 性能优化
于 2021-06-24 09:14:59 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/liuhao9999/article/details/118176172
本文详细介绍了如何通过浏览器级别的延迟加载、Intersection Observer和事件处理程序来实现图片延迟加载，以优化网页性能。内容包括内嵌图像的延迟加载方法，如使用`loading="lazy"`属性，结合Intersection Observer实现兼容性，以及针对不支持Intersection Observer的浏览器使用事件处理程序。文章还提到了CSS中的图像延迟加载策略和一些延迟加载库的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

由于在 HTML 中作为元素或 CSS 背景图像内联，图像可以出现在网页上。在这篇文章中，您将了解如何延迟加载这两种类型的图像。

内嵌图像

最常见的延迟加载候选是元素中使用的图像。对于内嵌图像，我们有三个延迟加载选项，可以组合使用以实现跨浏览器的最佳兼容性：

  • 使用浏览器级延迟加载
  • 使用交叉点观察器
  • 使用滚动和调整大小事件处理程序

使用浏览器级别的延迟加载

Chrome 和 Firefox 都支持带有loading属性的延迟加载。此属性可以添加到元素，也可以添加到元素。值lazy告诉浏览器如果图像在视口中则立即加载图像，并在用户滚动到其他图像附近时获取其他图像。

了解本专栏 订阅专栏 解锁全文
图片延迟加载
每天都要努力学习哦~~
01-25 3538
前言 图片延迟加载:真实项目中非常重要的一个性能优化手段; 在没有加载图片之前,图片区域用默认的背景图(背景色)占位即可 首屏:先加载首屏的其他数据(内容,样式,文本等),等待其它数据加载完成,再去加载真实的图片 其他屏:当我们滚动到指定区域(一露面,出来一半,完全出现在屏幕中),在去加载真实图片 //在浏览器滚动条滚动(页面滚动)过程中,等待图片完全出现在可视窗口内的时候,我们加载真实图片 "这是非首屏图片的处理步骤"-->计算出盒子底边距离body(a)的距离 和 浏览器底边距离bo.
[转]图片延迟加载的实现
weixin_30390075的博客
07-29 194
最近在做页面加载速度的研究，顺便就了解下前端的懒加载。顺手转一篇文章，大家也都了解下 图片延迟加载也称懒加载，通常应用于图片比较多的网页，如果一个页面图片比较多，且页面高度或宽度有好几屏，页面初次加载时，只显示可视区域的图片，当页面滚动的时候，图片进入了可视区域再进行加载，这样可以显著的提高页面的加载速度，更少的图片并发请求数也可以减轻服务器的压力。如果用户仅仅在首屏停留，还可以节省...
css3讲解图片懒加载效果的实现方法，包括 HTML、CSS 和 JavaScript 的配合使用
最新发布
前端大白话
06-04 766
前几天帮同事修老项目，打开页面差点被卡住——20张1MB的图片挤在首屏，加载条转得像电风扇。同事摸着发烫的电脑说：“客户投诉打开慢，可我也不想啊！” 别急，今天咱们就聊前端性能优化的“布洛芬”——**图片懒加载**。这招能让页面打开快30%，省流量还不卡，看完你也能给项目“降降温”～
前端图片延迟加载详细讲解
kvhur的博客
08-25 223
原文链接：http://www.gbtags.com/gb/share/6366.htm?           原本是打算昨天昨天下午的时候就写一篇关于前端图片延迟加载的详细技术的博客的，没想到下午公司项目出现了一些问题，所以一直在改代码进行调试，今天白天一整天又在外面跑，回来已经傍晚了，刚吃完饭，就想着赶紧补上，这样很多不懂这方面具体实现的小伙伴们也能早点学习经验。    ...
jQuery实现图片延迟加载
weixin_34241036的博客
10-20 133
在浏览有些网站时，发现图片是在下拉滚动条时才加载,这是一个很不错的用户体验。这一效果是通过JavaScript 编写的 jQuery 插件实现的，它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.在包含很多大图片长页面中延迟加载图片可以加快页面加载速度. 浏览器将会在加载可见图片之后即进入就绪状态...
网页图片延迟加载
sunboy2718的专栏
08-05 888
看到很多大型的网站，都实现了图片延迟加载，即在浏览器的可视范围内才加载图片。这样最大的一个好处就是节约带宽提高用户体验，特别是对于访问量高的大型网站就显得尤为重要，往往大部分网站的流量都是图片大于文本内容，因此网站图片资源优化可以有很大的提升空间。 在说网站图片延迟加载前，先说下网站图片上传的处理。一般网站上传图片会保存原图，如果网站有多个尺寸规格的需要显示，还要按需生成不同大小的缩略图，这样做
jquery图片延迟加载
06-20
3. **动画效果**：加载图片时，可以添加过渡效果，比如淡入、渐显，提升用户体验。 4. **图片懒加载插件选择**：除了`lazyload`，还有其他如`lozad.js`、`lazysizes`等优秀插件，可以根据项目需求选择合适的。 5. ...
HTML延迟加载图片 html图片延迟加载技术大全.zip
01-09
HTML延迟加载图片，也称为懒加载（Lazy Load），是一种优化网页性能的技术，它允许网页只在需要时才加载图片，而不是一次性加载所有内容。这种技术对于拥有大量图片的页面尤其有益，因为它可以显著减少页面的初始...
vue-lazyload图片延迟加载插件的实例讲解
11-30
`try` 属性则指定了加载图片的重试次数。此外，还有其他可选配置，如 `throttleWait`（滚动事件的防抖延迟时间）、`bindOnce`（是否只绑定一次）等，可以根据项目需求进行调整。 6. **事件监听** Vue-Lazyload 还...
images-lazyload:图片延迟加载
06-28
**图片延迟加载（Images Lazyload）技术详解** 在网页设计中，图片是不可或缺的元素，但大量的图片会显著增加页面的加载时间，影响用户体验。为了解决这个问题，一种名为“图片延迟加载”（Images Lazyload）的技术...
js图片延迟加载
weixin_30575309的博客
12-20 188
什么是图片延迟加载？ 也叫懒加载。 当页面有多屏的时候，页面中的图片比较多。 那么，在页面载入完毕的时候，并不会把所有的图片都加载进来。 而是当用户拖动滚动条的时候，图片要进入用户的视野了，才开始加载对应位置的图片。 有什么用？ 主要是为了提升网站的性能，节省流量（网站和用户）。 如何实现 如果的开发的时候，实现的方式其实有很多相应的插件。 原生的js来实现。 我们就是站在学习...
html延迟加载图片
03-08
html延迟加载图片 支持ie6和ie6以上任何浏览器
延迟加载(Lazyload)三种实现方式
weixin_33862188的博客
03-01 1299
2019独角兽企业重金招聘Python工程师标准>>> ...
图片延迟加载、预加载
u013400314的博客
08-04 758
1、图片延迟加载 loading 属性 定义：延迟加载也称为惰性加载，即在长网页中延迟加载图像。用户滚动到它们之前，视口外的图像不会加载。这与图像预加载相反，在长网页上使用延迟加载将使网页加载更快。在某些情况下，它还可以帮助减少服务器负载。 举个例子来说明，当打开淘宝首页的时候，只有在浏览器窗口里的图片才会被加载，当你滚动首页向下滑的时候，进入视口内的图片才会被加载，而其它从未进入视口的图像不会也不会加载。那么延迟加载有什么好处：首先它能提升用户的体验，试想一下，如果打开页面的时候就将页面上所有的图片全部获
jquery插件实现图片延迟加载 -- jquery.lazyload
weixin_30687587的博客
02-05 134
看到了淘宝产品介绍中,图片是在下拉滚动条时加载,这是一个很不错的用户体验。减少了页面加载的时间了，也减轻了服务器的压力，就查了下用JQuery.. 什么是ImageLazyLoad技术 在页面上图片比较多的时候，打开一张页面必然引起与服务器大数据量的交互。尤其是对于高清晰的图片，占的几M的空间。ImageLazyLoad技术就是，当前可见界面的图片是加载进来的，而不可见页...
图片的延迟加载
coderMozart的博客
04-13 360
问题：后台返回字符串，需要渲染到一本线上书上 正则：let  reg_has_img = /<img [^>]*src=['"]([^'"]+)[^>]*>/gi; 解决：通过JS正则中的replace应用首先替换相应的 img标签的src为空，当翻到书的有图的页面后加载图片 实现： 首先捕获item中HtmlContent中img src中的内容并且把捕获内容pu...
延迟加载图片（懒加载）
zLanaDelRey的博客
01-06 923
什么是延迟加载 延迟加载又称懒加载（lazyload），是前端开发人员对网页性能优化的一种方案。延迟加载主要针对两种情况进行优化，一种是针对数据做延迟加载优化，一种是针对对象实例延迟创建优化。 工作原理： 在HTML构造输出的时候，先不要设置图片标签img的src属性，改用其他属性（如lazy）； 要判断图片（其他资源同理）是否在当前可视屏范围； 根据第二条的判断把其他属性（如lazy）中保存的...
关于图片的延迟加载
9527
05-23 676
1.引入延迟加载js2.初始化$(function(){ $("img").lazyload();});3.使用img标签时：<img class="lazy" src=""  data-original="" alt="">src路径为加载时显示的图片data-original为真实的图片路径...
vue-pdf-app延迟加载
01-04
### 如何优化 `vue-pdf-app` 的延迟加载性能 #### 使用 Webpack 动态导入实现按需加载 PDF 组件 为了提高应用的初始加载速度并改善用户体验，在 Vue.js 应用程序中可以采用懒加载的方式引入第三方库，比如 pdf.js 或者其他用于显示 PDF 文档的相关插件。对于 `vue-pdf-app` 这样的组件来说，可以通过动态 import() 来实现其异步加载。 ```javascript // 路由配置文件 router/index.js 中定义路径对应的组件时使用函数形式返回 Promise 对象来代替直接指定组件对象 { path: '/pdf-viewer', name: 'PdfViewer', component: () => import(/* webpackChunkName: "pdf-viewer" */ '@/components/PdfViewer.vue') } ``` 当用户导航到 `/pdf-viewer` 页面时才会触发该模块的实际下载过程[^1]。 #### 配置 Webpack 提取公共代码减少重复体积 如果多个地方都依赖于同一个版本的 pdf.js，则应该考虑将其作为 vendor chunk 单独打包出来以便共享缓存： 编辑项目的根目录下的 `vue.config.js` 文件（如果没有则创建），加入如下配置项以分离 vendors chunks: ```javascript module.exports = { configureWebpack: { optimization: { splitChunks: { cacheGroups: { commons: { test: /[\\/]node_modules[\\/]/, name: 'vendors', chunks: 'all' } } } } } }; ``` 这会使得所有来自 node_modules 的包都被提取成单独的一个 js 文件[vendors.js], 减少每次请求不必要的数据传输量的同时也提高了浏览器端的缓存利用率[^2]. #### 加载前展示占位符或预览图 考虑到大型 PDF 文件可能需要较长时间才能完成渲染，可以在实际内容准备就绪之前先给出一些视觉反馈给访问者知道正在发生什么。例如，可以用简单的灰色矩形框模拟文档外观尺寸；或者是提前准备好一张缩略版封面图片放在那里等待替换为真实的第一页扫描图像。 ```html <div v-if="loading"> <!-- 显示 loading spinner --> </div> <img :src="thumbnailUrl" alt="PDF Preview Thumbnail"/> <vue-pdf-app ref="pdfApp"></vue-pdf-app> ``` 结合以上方法能够有效降低首屏渲染时间，并让用户感受到更流畅的操作体验。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

紫微前端

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值