Tinniccii

懒加载的实现

By Tinco Chan in

记录两个懒加载的实现方法，一个是原生的Chromium方法，一种利用lazysizes.js。

原生的Chromium方法

目前<iframe loading=lazy>并没有标准化兼容，只是能在Chromium上试验，Chrome 76+以及firefox 75+版本能实现。生产上最好暂时不要用这个方法，不知道以后这个方法会怎么改进。这里是目前浏览器的兼容性列表。

这里以Chrome 76+为例子：

<img src="image.png" loading="lazy" alt="…" width="200" height="200">
<iframe src="https://example.com" loading="lazy"></iframe>

loading属性有三个属性值：

Auto：默认懒加载，没有loading这个属性的时候就是默认懒加载；

lazy： 懒加载

eager：全加载

图片懒加载

这里<img>标签需要定义width和height，如果没有明确高宽的话图片依然会实现懒加载，只是浏览器有一定几率触发重渲染。

<img src="…" loading="lazy" alt="…" width="200" height="200">
<img src="…" loading="lazy" alt="…" style="height:200px; width:200px;">
<!-- lazy-loaded -->

这里是<picture>的实现：

<picture>
  <source media="(min-width: 800px)" srcset="large.jpg 1x, larger.jpg 2x">
  <img src="photo.jpg" loading="lazy">
</picture>

iframe加载

这里和图片加载有所不同，取决于<iframe>的是否hidden，当hidden时iframe在大多数情况不会懒加载，对此Chrome按以下标准判断iframe是否hidden：

  1. iframe的高宽小于等于4px；
  2. display:none或者visibility:hidden;
  3. iframe在通过坐标负值定位在了屏幕之外。

总的来说，原生的方法需要考虑Load-in distance threshold，也就是加载所限定的距离。

lazysize.js 方法

这个方法比较简单，首先导入外部js：

<script src="lazysizes.min.js" async></script>

然后就是在原有的<img>标签内改两个属性src改成data-src，加个class="lazyload"，<picture>类似：

<img data-src="flower.jpg" class="lazyload" alt="">

<picture>
  <source type="image/webp" data-srcset="flower.webp">
  <source type="image/jpeg" data-srcset="flower.jpg">
  <img data-src="flower.jpg" class="lazyload" alt="">
</picture>

好像没什么事情了，这里有个很不错的懒加载案例。