javascript - JavaScript img onload - 渐进式 jpg/jpeg

Question

有没有办法检测渐进式JPEG（或至少第一个）的每个步骤的加载？

目前，一旦加载最终（高质量）图像，就会触发 onload() 事件。

在 Chrome 48 中测试。

Answer 1

没有事件。

有一个loadstart事件会告诉您浏览器何时发出请求，但这并不意味着还有任何数据。

您可以继续轮询.naturalHeight属性以观察浏览器是否知道图像尺寸，这意味着至少它已经获得了一些数据。

一个绝望的选择，在大多数情况下很可能效率太低，是使用 XHR/fetch 下载图像（它允许您观察下载进度），然后继续将部分数据设置为Blob图像元素。我使用这个 hack 来演示ImageOptim API 演示页面上的慢动作渐进式图像加载。

另一种选择是使用ServiceWorker, 并通过分块流，并观察已发送了多少流。对于 JPEG，您可以放心地假设文件的 15% 足以呈现文件的可用预览。