以百分比表示的Javascript圖像加載

在js中加載圖像時，有任何方法可以顯示「百分比加載欄」嗎？換句話說，我想利用這個：以百分比表示的Javascript圖像加載

var img = new Image(); 
img.onload = function() { 
    document.querySelector('#percents').innerHTML = 'all done'; 
}; 

img.onreadystatechange = function(e) { 
    document.querySelector('#percents').innerHTML = e.percentsLoaded; 
}; 

img.src = 'http://example.com/image.png';

來源

2011-04-24 Dmitrii Sorin

要做到這一點，您將需要實際的文件大小，這可以在這裏找到 http://stackoverflow.com/questions/1310378/determining-image-file-size-dimensions-via-javascript/1310399#1310399 – Ibu 2011-04-24 20:45:41

您還需要中間進度事件，這在Javascript中不存在： – Halcyon 2011-04-24 21:59:41

JavaScript有加載資源無中間事件。你可以顯示一個加載欄，如果你正在加載多個圖像，但我猜測情況並非如此。

如果你真的想這樣做，我認爲唯一的解決辦法是使用Flash，它可以做一些花哨的東西，但..好..它的Flash：/

看一些大的相冊圖像託管網站，看看他們是否有解決方案。

來源

2011-04-24 21:01:55 Halcyon

謝謝。我希望我失敗:( – 2011-04-25 09:36:39

是否可以使用'canvas'元素來做到這一點？ – SexyBeast 2014-06-23 18:56:50

以百分比表示的Javascript圖像加載

回答

相關問題