web 图片懒加载

图片懒加载是 web 应用优化的一个重点。关于这方面的文章到处都是。各个框架也都有相应的插件。但因为用不到,我一个都没用过,也没研究过。

我想,其原理应该是不直接指定 src 属性。监听滚动事件,当页面滚动到临界图片位置的时候再赋值 src 属性。为了防止初始页面太难看,也可以先指定一个默认图片。

写这篇文章并不是因为多么想了解已有的图片懒加载技术,而是因为更新 wordpress 的时候,顺便看到了网上的一篇相关文章,文章里提到 wordpress 5.5.1 支持图片懒加载,实现方式是再 img 标签上添加一个 loading 属性,其值为 “lazy”。除了 safari 之外的所有现代浏览器都支持原生的图片懒加载。

惊呆了的我立即查看了 MDN 文档,发现虽然是实验属性,但浏览器确实已经支持了。

loading

指示浏览器应当如何加载该图像。

允许的值:

eager 立即加载图像,不管它是否在可视视口(visible viewport)之外(默认值)。

lazy 延迟加载图像,直到它和视口接近到一个计算得到的距离,由浏览器定义。

https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/img