是否有可能使用JavaScript來檢查圖片的大小加載

這是一個完全愚蠢的問題。但我只是想澄清我的疑問。當圖像加載時，我們可以使用onload或oncomplete事件來檢查加載狀態。但我只想知道使用JavaScript加載了多少圖像。真的有可能嗎？是否有可能使用JavaScript來檢查圖片的大小加載

我的問題是，我們可以從URL獲取圖像大小嗎？我們可以在某個時間間隔內獲取多少圖像部分？

來源

2012-12-17 Exception

不可靠。並非所有服務器都包含大小標題，並非所有服務器都將包含可靠大小標題。可能會有一些非常低級的瀏覽器特定的內部狀態，你可以檢查，但在標準的JS中，沒有任何「進展」的東西，你可以檢查到處都可以。 –

這篇文章可能會感興趣：http://blogs.adobe.com/webplatform/2012/01/13/html5-image-progress-events/ – maerics

你可以通過XHR如果是同一個域加載它，並聽取了進展事件。 – zzzzBov

如果通過XMLHttpRequest object加載圖像，您可以bind to the progress event並檢查函數參數「event」屬性「loaded」和「total」。與往常一樣，各種瀏覽器之間的支持可能是一個驚喜。

從linked MDN article：

var req = new XMLHttpRequest(); 
req.addEventListener("progress", onProgress, false); 
req.open(); 

function onProgress(ev) { 
    if (evt.lengthComputable) { 
    var percentComplete = evt.loaded/evt.total; 
    // ... 
    } else { 
    // Unable to compute progress information since the total size is unknown. 
    } 
}

[更新]每評議@ BERGI的問題，如果你想給圖像添加到DOM，一旦完全下載的，你可以用添加一個新的圖像元素：

「src」屬性等於您通過XHR獲取的URL（並希望瀏覽器緩存可防止冗餘下載）。
或者將「src」屬性設置爲data URI of the Base64 encoded image content而不用擔心瀏覽器緩存。

var img = new Image(); // or document.createElement('img'); 
img.src = ... // URL from the above XHR request, or 
img.src = 'data:image/png;base64,' + base64(xhrContent); 
document.body.appendChild(img);

來源

2012-12-17 18:40:46 maerics

通過XHR加載後，如何顯示圖像？只需在同一個網址中插入一個「新圖片」，並希望使用緩存版本？或者應該一個'base64'-url-編碼二進制內容並輸出它？ – Bergi

@Bergi：這兩個想法聽起來都像是有效的選擇。 – maerics

您可以用html5 file api現代瀏覽器，允許讀取文件名，文件大小，MIME類型實現這一目標，並以文件句柄的引用 - 選中此example

來源

2012-12-17 18:44:18 con

是否有可能使用JavaScript來檢查圖片的大小加載

回答

相關問題