图片懒加载的原理

于 2021-04-24 22:17:16 发布
阅读量122 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_45261845/article/details/116107769
版权
本文详细介绍了图片懒加载的实现原理，通过获取滚动高度、窗口高度和图片的顶部偏移量来判断图片是否进入视口。当图片即将显示或者已经完全在视口内时，才加载图片，以此提高页面加载速度。同时，使用pic.loaded属性防止图片重复加载。这是一个有效的前端性能优化策略。

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

图片懒加载

分析图

获取的值有哪些？

  • 滚动高度scrollTop=document.body.scrollTop||document.documentElement.scrollTop ;
  • 窗口高度 var H=window.innerHeight;
  • 顶部偏移量 var offsetTop=box.offsetTop;

解释说明

如果scrollTop+innerHeight=offsetTop,说明图片即将要进场；如果scrollTop+innerHeight>=offsetTop（+100）(&&!pic.loaded)说明加载图片的图片已经进入了试图区域内 此时我们就可以把图片的真实路径付给img标签
pic.loaded记录图片加载状态 防止图片重复加载 这个属性条件可加可不加
好了，就这些 如果有什么意见相悖的小伙伴 可以在评论区留言哦！

JS图片懒加载的优点及实现原理
10-15
### JS图片懒加载原理 图片懒加载的实现原理是先将img标签的src属性设置为一个默认图片（如占位符或者首张图片）或者暂时不设置src属性，然后使用一个自定义的属性（如data-src）来保存图片的真实地址。这样，图片...
图片懒加载
weixin_47218056的博客
08-08 206
什么是图片懒加载？ 当打开一个有很多图片的页面时，先只加载页面上看到的图片，等滚动到页面下面时，再加载所需的图片。这就是图片懒加载。 图片懒加载的作用 减少或延迟请求数，缓解浏览器的压力，增强用户体验。 图片懒加载的基本原理 1､设置图片src属性为同一张图片，同时自定义一个data-src属性来存储图片的真实地址 2､ 页面初始化显示的时候或者浏览器发生滚动的时候判断图片是否在视野中 3､ 当图片在视野中时，通过js自动改变该区域的图片的src属性为真实地址 1.document.documentElem
jq图片懒加载
weixin_45328847的博客
07-01 523
<style> .container{ max-width: 800px; margin:0 auto; } .container:after{ content:""; display: block; clear:both; } .container img{ ...
图片懒加载实现原理
weixin_44190647的博客
08-20 318
图片懒加载实现原理 一.什么是懒加载？ 懒加载突出一个“懒”字，懒就是拖延迟的意思，所以“懒加载”说白了就是延迟加载，比如我们加载一个页面，这个页面很长很长，长到我们的浏览器可视区域装不下，那么懒加载就是优先加载可视区域的内容，其他部分等进入了可视区域在加载。 二.为什么要懒加载？ 懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片一直是影响网页性能的主要元凶，现在一张图片超过几兆已经是很经常的事了。如果每次进入页面就请求所有的图片资源，那么可能等图片加载 出来用户也早就走了。所以，
微信小程序实现图片懒加载的示例代码
08-28
图片懒加载的原理是通过预加载图片，然后再显示出来原图，而非真正意义上的懒加载。这种技术可以提高用户体验度，但与web上的懒加载技术还有很大的差距。 在微信小程序中，图片懒加载可以通过以下步骤实现： 首先...
图片懒加载文件jquery插件库EasyLazyload
10-11
图片懒加载是一种优化网页性能的技术，它在网页加载时并不会一次性加载所有图片，而是等到用户滚动页面，即将看到这些图片时才开始加载。这样可以显著减少初始页面加载时间，提高用户体验，特别是对于拥有大量图片的...
原生JS实现图片懒加载之页面性能优化
10-17
一、图片懒加载原理 1. 数据存储：首先，我们需要为图片`<img>`标签添加一个自定义属性，如`data-src`，用来存储实际的图片URL。常规的`src`属性则设置为一个占位符，例如一个加载指示符或透明的`1x1`像素图像。 2...
图片懒加载的原理及实现
xiaomao_wxj的博客
08-19 6927
为什么要使用图片懒加载呢？什么是图片懒加载呢？ 1. 原理 图片懒加载是前端页面优化的一种方式，在页面中有很多图片的时候，图片加载就需要很多时间，很耗费服务器性能，不仅影响渲染速度还会浪费带宽，为了解决这个问题，提高用户体验，所以就出现了懒加载这种方式来减轻服务器的压力，优先加载可视区域的内容，其他部分等进入了可视区域再加载，从而提高性能。 2. 实现 思路：在图片没有进入可视区域时，先不给的src赋值，这样浏览器就不会发送请求了，等到图片进入可视区域再给src赋值。图片的真实地址需要存储在data-src
【Web技术】771- 图片懒加载从简单到复杂
pingan8787
11-08 293
作者 | hateonion来源 | https://hateonion.me/posts/19jan30/图片懒加载是一个很重要的前端性能优化手段。这篇文章将从懒加载的最简单场景开始介...
图片懒加载原理及实现
weixin_34260991的博客
06-05 272
      由于过多的图片会严重影响网页的加载速度，并且移动网络下的流量消耗巨大，所以说延迟加载几乎是标配了。        图片懒加载的原理很简单，就是我们先设置图片的data-set属性（当然也可以是其他任意的，只要不会发送http请求就行了，作用就是为了存取值）值为其图片路径，由于不是src，所以不会发送http请求。 然后我们计算出页面scrollTop的高度和浏览器的高度之和， 如果图...
图片懒加载原理
xieting153的博客
09-08 714
/* * 图片的懒加载 * 只有当页面滚动到图片位置显示的时候才去加载图片； 一开始图片的位置可以方一张小的默认图 * 优势： 提升页面的加载速度 * 在移动端省流量； * * 实现的原理：监听页面滚动；当页面滑倒图片位置的时候，再去让 图片显示（图片的src换成真正的链接） ； * */ /* *需求： 当页...
图片懒加载(核心原理)
xieting153的博客
09-13 255
function loadImg(ele) { //查看 图片到body的距离是否 小于 卷去的高度+一屏的高度 说明图片露出来了 if(ele.loaded)return; var scrT = utils.scrollT(); var cliT = utils.clientH(); var tarT = utils.offset(ele).t; ...
说说图片懒加载原理
welnee的博客
10-22 223
详见：懒加载和预加载
75行代码 完美实现图片完整展示 flex 横向瀑布流布局
haolangtaiye的博客
11-20 2589
布局特点 代码简单 图片完整展示，不会被裁切 以图片异步加载完毕的顺序渲染图片，防止页面闪动 最后一行图片过少时，图片不会被放大得很大 在线预览 https://haolang.github.io/web/demo/500px/ 效果如下 代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值