JavaScript img onload - 渐进式jpg/jpeg

Question

3

有没有一种方法可以检测到渐进式JPEG每一步的加载（或者至少是第一步）？

目前，onload()事件在最终（高质量）图像加载完成时被触发。

在Chrome 48中测试过。

- igorpavlov

1

非常怀疑，而且与图像格式密切相关。我会说不。 - somethinghere

你好，我想知道你是否找到了解决这个问题的方法？即使它不能检测每一步，但至少我希望有一个事件告诉我何时达到了第一步（也就是某些内容可以显示）。 - Jeremy Belolo

抱歉，这个任务对我来说已经变成了低优先级的事情，我没有进行进一步的研究。 - igorpavlov

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Kornel · Accepted Answer

这方面没有相应的事件。

有一个 loadstart 事件，可以告诉你浏览器何时发出请求，但这并不意味着已经有数据了。

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

一个不太切实际的选择是使用 XHR/fetch 下载图像（这样可以观察下载进度），然后将部分数据设置为图像元素上的 Blob。我在 ImageOptim API 演示页面上使用这个技巧来演示缓慢加载渐进式图像。

另一种选择是使用 ServiceWorker，并传递一个分块流，观察发送了多少数据。对于 JPEG 文件，您可以安全地假设文件的 15% 足以呈现可用的预览。