谷歌浏览器竟然自带 lazy load API

[wework]

今天刚好有个 typecho 主题，图片太多一下子加载有点慢，想加个 lazy load 控制一下，无意中发现了 chrome 浏览器带有 Lazy load API

只要在需要加载的图片那里添加一个 loading="lazy" 属性就可以了

<img src="大图.png" loading="lazy" onload="alert('Loaded!');">

貌似这个 loading 属性只有少数浏览器支持，所以 lazy load 还是用插件吧

https://caniuse.com/#search=loading

[wuxingsanren]

学习了，👍楼主

[Track13]

和暗色模式一样，等 5 年再说。好多浏览器版本还是 60 几

[autoxbc]

其实懒加载会破坏用户体验

想象一下你打开一个页面放在旁边一分钟了，切换过去准备浏览发现图片开始一张一张加载，真的觉得设计懒加载的人是自作聪明

当然对我是无所谓的，我自己有脚本专门处理所有的 lazy 改成 eager，各种奇怪的私有属性就有四十多种

[zxcslove]

@autoxbc 给你点个赞

[mgrddsj]

@autoxbc #3 懒加载其实是对站长有利而已，服务器压力没那么大。

[loading]

lazyload 其实就是浪费大家的时间，省了流量费。

[dvaknheo]

看了一下我的谷歌浏览器：

版本 43.0.2357.81 m

不知道哪一年的版本

[reeco]

补充一点 Google Chrome 75 这个版本开始支持

[DOLLOR]

不光 img，iframe 标签也可以用 loading="lazy"

[wework]

@DOLLOR 是的，caniuse.com 里面说到了相关属性

[belin520]

@autoxbc 懒加载是为了减缓服务器带宽压力的
不过现在大家都用 CDN，不在乎流量的话，肯定没必要懒加载

[ericgui]

谁说 lazy loading 没用的？

我们前端项目，一次性加载 6 万多条房地产数据信息，每个房子带 2-10 张图片

你要不是懒加载，这 app 直接崩溃

[ericgui]

懒加载，按需加载，这都是为了减轻客户端的压力

[luckyrayyy]

@ericgui 你不考虑下为什么要单个页面展示六万多的数据还不分页？？

[ericgui]

@luckyrayyy 展示在地图上，分什么页

其他的形式，早就分页了

[randyo]

@luckyrayyy 分页不也是一种懒加载吗😗

[luckyrayyy]

@randyo 这就有点强行对立然后抬杠了....要么一个一个加载，要么直接把数据库全搬来是吧

[em2046]

难道一直没有发现 V2EX 的头像一直在用这个吗
对用户体验来说，先会出现一个白块，然后图片显示。比起预先加载来说，一次闪烁会稍微干扰一下视觉焦点。

[nekochyan]

看本子的时候看到一半后面还没加载出来，就很蛋疼...

[a62527776a]

@ericgui 一次载入 6 万多条 这个需求合理吗？