jQuery的進度

Question

我有一個形象的HTML聲明：

<img src="images/image_01.gif" id="man_img_file" width="400" height="300" alt="image_01" /> 

我通過jQuery的改變圖像：

$('#man_img_file').attr('src', "images/image_02.gif"); 

現在我想在圖像加載時顯示百分比進度條（即在通過jQuery加載新的src圖像時）。這怎麼能實現？可以使用jQuery進度條完成嗎？

注意：圖像已存在於服務器中，我可以在加載之前通過PHP腳本獲取圖像大小。

Answer 1

謝謝Laurence分享。

1. 在改變「SRC」與jQuery屬性，字節數加載不能上飛（用JavaScript）來檢測。
2. 但是，在加載圖像時，可以顯示加載消息/圖像。 （檢查勞倫斯的回答上面的溶液）
3. 正如勞倫斯說，「如果你感到快樂與HTML5和任何超過IE9，你可以明顯地做到這一點與XHR：http://blogs.adobe.com/webplatform/2012/01/13/html5-image-progress-events/（見這裏的樣本：http://blogs.adobe.com/webplatform/files/XHRProgressSample.html?file=XHRProgressSample.html）」

Answer 2

您可能無法添加進度欄，因爲我不知道通過使用Javascript來確定已加載多少圖像的方法。

但是，您可以使用Image對象，並顯示一個旋轉的 「加載」 GIF，而新的圖像加載：

function LoadNewImage(target, url) { 
    var newImage = new Image(); 

    // some overlay div 
    loadingOverlay.show(); 

    newImage.src = url; 

    newImage.onload = function() { 
     // image is loaded into browser memory, so will display instantly 
     target.attr('src', url); 

     // hide the overlay again 
     loadingOverlay.hide(); 
    } 
} 

這裏有一些鏈接，可以幫助：

Preload images with javascript

Show a loading overlay