如何比较理想的实现图片延迟加载？

Question

最近需要实现一个图片延迟加载功能，于是网上搜索了一下，发现几乎所有文章的核心都是“图片默认设置loading状态，显示背景loading动画效果，当图片进入浏览器可视区域时，动态设置图片的src属性”，这时候发现一个问题，因为进入可视区域后，给图片src属性赋值，这个过程是本地执行的，非常快就执行完成了，这个过程显示loading动画，往往会很短暂，真真比较消耗时间的过程是，当给图片设置src属性，到图片被加载出来，这个过程往往是不可控制的，所以这种方式效果不太好。

换一种思路，给图片设置默认src为loading.gif，当图片设置src并且图片被加载出来之前，图片一直会显示loading.gif，这种算是比较理想的，但是也有一个问题，这个时候的loading.gif图片尺寸不好控制，因为loading.gif动画一般会显示为图片宽高的很小一部分，也就是说图片需要设置很大的空白区域，不然整个图片都显示成loading.gif会显得很粗糙。

请问大家有更好的方式吗？

谢谢！！！

方式二的效果，如下：

Answer 1

1. 背景图
2. object-fit: contain;

其实 loading 你也可以后面在显示。

---

你的问题其实出现在网络慢，导致图片显示慢。所以只要你先把 loading 搞回来，然后懒加载的时候先切换成 loading，然后在切换成图片即可。

Answer 2

https://wallhaven.cc/latest?p...

1. 一定需要gif 作为占位图吗，你提到的第二个思路就是占位图分辨率的问题，可以用 canvas 绘制动画嘛
2. wallhaven 中图片的比例是固定的，如果需要避免图片比例不固定造成的加载抖动，可以使用 padding-top 等实现一个不同比例的盒子（需要配合参数，图片携带其比例）
3. 第二种思路监听 onload 再赋值，其实已经很好了，不会出现图片加载一部分的情况

总结就是，1. 知道图片比例是最好的情况，可以避免抖动；2. 不知道，就占位，通过canvas 或其他方式解决占位图分辨率的问题，或者直接纯色； 3. 创建 Image ，监听 onload 再赋值给真实节点

之前的一个项目是这么做的

Answer 3

这个没有特别好的方法。
至于精度问题，可以考虑用矢量图（动画），这种是可以自适应不同分辨率的。