不是哥们!仅需一行HTML代码便可实现懒加载?😒,确定不点进来看看吗?🚀

开篇废话:终于把所有的亲戚走完了,一个月了😭终于有时间写文章了。你们的CSS大师又回来辣

懒加载,这是很多人对自己网页优化的一种手段。

作者,作者,你的懒加载还是太吃操作了,有没有简单又强势的方法推荐一下?🤔

有的兄弟有的,接下来让我们有请出loading="lazy"

我也看到有人写了它,但是没有讲到精髓,并且我使用了没有作用。接下来跟我一起真正学习他。
全文不长,耐心观看(叠个甲,作者才大二能力有限,如有错误,轻点喷🙏)

开始

我这里准备了几张图片

html 复制代码
  <img src="./13.png" alt="">
  <img src="./pexels-baskincreativeco-1766838.jpg" alt="">
  <img src="./pexels-david-besh-884788.jpg" alt="">
  <img src="./pexels-dreamypixel-547115.jpg" alt="">
  <img src="./pexels-eberhardgross-1428277.jpg" alt="">
  <img src="./pexels-iriser-1379636.jpg" alt="">
  <img src="./pexels-pok-rie-33563-2049422.jpg" alt="">
  <img src="./pexels-sebastiaan9977-1097456.jpg" alt="">

可以看到我们在不做任何优化的情况下消耗的资源非常大。

遇到这种情况,很多人就会选择使用懒加载的方式进行优化(这里默认大家都懂懒加载是什么,就不深入讲解了)

这里我们使用loading="lazy"来进行,睁大好你的眼睛👀

html 复制代码
  <img src="./13.png" alt="" loading="lazy">
  <img src="./pexels-baskincreativeco-1766838.jpg" alt="" loading="lazy">
  <img src="./pexels-david-besh-884788.jpg" alt="" loading="lazy">
  <img src="./pexels-dreamypixel-547115.jpg" alt="" loading="lazy">
  <img src="./pexels-eberhardgross-1428277.jpg" alt="" loading="lazy">
  <img src="./pexels-iriser-1379636.jpg" alt="" loading="lazy">
  <img src="./pexels-pok-rie-33563-2049422.jpg" alt="" loading="lazy">
  <img src="./pexels-sebastiaan9977-1097456.jpg" alt="" loading="lazy">

可以发现,我的天呐😱,它没有任何变化!!😱😱😱

无论你怎么缩小视口大小,它总是全部加载(我不知道不同浏览器会不会情况不同,这里大家自行验证)

这是怎么回事呢?这其实也是很多文章没有讲到的地方🤔

这其实并非浏览器的错误,只是我们还没有完成要懒加载的要求

因为系统需要知道我们图像要多大来保证空间当我们图像缺失的时候,我们的设计不会破裂

不明白?没关系😄,记住结论就行

解决方法就是:我们需要明确指定宽高信息

注意是明确指定!⚠️宽和高任意一个信息缺少都将失去作用!⚠️

我们给每一个img都指定宽高信息

css 复制代码
    img {
      width: 2000px;
      height: 2000px;
    }

可以发现懒加载已经生效

总结

我们通过loading="lazy"一行html实现懒加载,但是需要明确指定宽高信息(缺一不可)

(这些结论大家自行尝试即可,这里就不给大家一一演示了,反正就是个懒加载功能🕶)

  • loading="lazy"加载数量与屏幕高度有关,高度越小加载数量越少,但并不是线性关系。
  • loading="lazy"加载数量与网速有关,网速越慢,加载数量越多,但并不是线性关系。
  • loading="lazy"加载没有缓冲,滚动即会触发新的图片资源加载。
  • loading="lazy"加载在窗口resize尺寸变化时候也会触发,例如屏幕高度从小变大的时候。
  • loading="lazy"加载也有可能会先加载后面的图片资源,例如页面加载时滚动高度很高的时候。
相关推荐
翻滚吧键盘3 分钟前
vue绑定一个返回对象的计算属性
前端·javascript·vue.js
秃了也弱了。22 分钟前
Chrome谷歌浏览器插件ModHeader,修改请求头,开发神器
前端·chrome
乆夨(jiuze)43 分钟前
记录H5内嵌到flutter App的一个问题,引发后面使用fastClick,引发后面input输入框单击无效问题。。。
前端·javascript·vue.js
忧郁的蛋~1 小时前
HTML表格导出为Excel文件的实现方案
前端·html·excel
小彭努力中1 小时前
141.在 Vue 3 中使用 OpenLayers Link 交互:把地图中心点 / 缩放级别 / 旋转角度实时写进 URL,并同步解析显示
前端·javascript·vue.js·交互
然我1 小时前
别再只用 base64!HTML5 的 Blob 才是二进制处理的王者,面试常考
前端·面试·html
NanLing1 小时前
【纯前端推理】纯端侧 AI 对象检测:用浏览器就能跑的深度学习模型
前端
呆呆的心1 小时前
前端必学:从盒模型到定位,一篇搞定页面布局核心 🧩
前端·css
小飞悟1 小时前
前端高手才知道的秘密:Blob 居然这么强大!
前端·javascript·html
小old弟1 小时前
用Sass循环实现炫彩文字跑马灯效果
前端