JavaScript img onload - 漸進式jpg/jpeg

Question

有沒有辦法通過檢測漸進式JPEG（或至少第一個）的每一步的加載？

目前onload（）事件在加載最終（高質量）圖像後觸發。

測試在Chrome 48

Answer 1

沒有爲它的事件。

有loadstart事件告訴你瀏覽器何時發出請求，但這並不意味着有任何數據。

您可以繼續輪詢.naturalHeight屬性以觀察瀏覽器是否知道圖像尺寸，這意味着至少它已獲得一些數據。

絕望的選擇，在大多數情況下效率極低，是使用XHR/fetch下載圖像（它允許您觀察下載進度），然後在圖像元素上保留部分數據設置爲Blob。我用這個黑客來演示在ImageOptim API demo page上慢鏡頭加載的圖像加載。