의 jQuery의 ProgressBar

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"); 

이제 내가 원하는 이미지가로드되는 동안 (즉, 새로운 src 이미지가 jQuery를 통해로드되는 동안) 백분율 진행 막대를 표시합니다. 어떻게이 일을 성취 할 수 있습니까? jQuery 진행률 표시 줄을 사용하여 완료 할 수 있습니까?

참고 : 이미지는 이미 서버에 있으며 이미지를로드하기 전에 PHP 스크립트를 통해 이미지 크기를 얻을 수 있습니다.

Answer 1

감사합니다. Laurence 'SRC는'와 jQuery 특성 변화시키면서

1. 는 바이트의 양이 (자바 스크립트)이 즉시 확인 될 수로드.
2. 그러나 이미지를로드하는 중에로드 메시지/이미지를 표시 할 수 있습니다. 로렌스는 말처럼,
3. 을 (솔루션에 대해 위의 로렌스의 답변을 확인) "당신은 IE9 위 HTML5와 아무것도 행복 경우에 당신은 명백하게 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를 사용하여 얼마나 많은 이미지가로드되었는지 확인할 방법이 없기 때문에 진행률 표시 줄을 추가하지 못할 수 있습니다.

Preload images with javascript

을 : 여기

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(); 
    } 
} 

도움이 될 몇 가지 링크가 있습니다 : 새로운 이미지를로드하는 동안

그러나 Image 객체를 사용하여 회전 "로드"GIF를 표시 할 수 있습니다 Show a loading overlay