[JQUERY] 자바 스크립트를 통해 이미지를로드하는 동안 스피너를 표시하는 방법

자바 스크립트를 통해 이미지를로드하는 동안 스피너를 표시하는 방법

해결법

1. ---

   1.나는 이미지를 미리로드 같은 것을 사용하고 이미지가 완성 로딩 될 때 자동으로 내 자바 스크립트로 다시 전화했습니다. 당신은 이미지가 이미 캐시 할 수 있으므로 설치 전에 콜백을 완료 확인하고 싶은 당신의 콜백을 호출 할 수 있습니다.

   나는 이미지를 미리로드 같은 것을 사용하고 이미지가 완성 로딩 될 때 자동으로 내 자바 스크립트로 다시 전화했습니다. 당신은 이미지가 이미 캐시 할 수 있으므로 설치 전에 콜백을 완료 확인하고 싶은 당신의 콜백을 호출 할 수 있습니다.

   function PreloadImage(imgSrc, callback){
     var objImagePreloader = new Image();
   
     objImagePreloader.src = imgSrc;
     if(objImagePreloader.complete){
       callback();
       objImagePreloader.onload=function(){};
     }
     else{
       objImagePreloader.onload = function() {
         callback();
         //    clear onLoad, IE behaves irratically with animated gifs otherwise
         objImagePreloader.onload=function(){};
       }
     }
   }
   

2. ---

   2.이러한처럼 회전 바퀴의 착시를 제공하는 정적 이미지를 보여줄 수 있습니다.

   이러한처럼 회전 바퀴의 착시를 제공하는 정적 이미지를 보여줄 수 있습니다.

3. ---

   3.jQuery를의 load () 메서드를 사용하면, 즉시 이미지가로드로 뭔가를 쉽게 할 수있다 :

   jQuery를의 load () 메서드를 사용하면, 즉시 이미지가로드로 뭔가를 쉽게 할 수있다 :

   $('img.example').load(function() {
     $('#spinner').fadeOut();
   });
   

   참조 : http://api.jquery.com/load-event/

4. ---

   4.에서는 setTimeout () 함수 (상세 정보)의 전력 사용 - (. 비동기)이 당신이 미래의 함수 호출을 트리거 타이머를 설정할 수 있으며, 그것을 호출하면 현재 / 기타 기능의 실행을 차단하지 않습니다를.

   에서는 setTimeout () 함수 (상세 정보)의 전력 사용 - (. 비동기)이 당신이 미래의 함수 호출을 트리거 타이머를 설정할 수 있으며, 그것을 호출하면 현재 / 기타 기능의 실행을 차단하지 않습니다를.

   none으로 그것의 CSS 표시 속성 세트로 차트 이미지 위의 회 전자를 포함하는 사업부를 위치 :

   <div>&nbsp;<img src="spinner.gif" id="spinnerImg" style="display: none;" /></div>
   

   는 회가 숨겨져있는 경우 붕괴 사업부를 중지 NBSP. 당신은 회 전자의 표시를 전환 할 때없이, 레이아웃은 "트"합니다

   function chartOnClick() {
     //How long to show the spinner for in ms (eg 3 seconds)
     var spinnerShowTime = 3000
   
     //Show the spinner
     document.getElementById('spinnerImg').style.display = "";
   
     //Change the chart src
     document.getElementById('chart').src = '/charts/10.png';
   
     //Set the timeout on the spinner
     setTimeout("hideSpinner()", spinnerShowTime);
   }
   
   function hideSpinner() {
     document.getElementById('spinnerImg').style.display = "none";
   }
   

5. ---

   5.사용 CSS는 이미지의 컨테이너의 중심 배경 이미지로 로딩 애니메이션을 설정합니다.

   사용 CSS는 이미지의 컨테이너의 중심 배경 이미지로 로딩 애니메이션을 설정합니다.

   새로운 큰 이미지를로드 할 때 그리고, 사전로드 된 제 1 투명 픽셀 GIF에 SRC 세트.

   EG

   document.getElementById('mainimg').src = '/images/1pix.gif';
   document.getElementById('mainimg').src = '/images/large_image.jpg';
   

   large_image.jpg로드하는 동안, 배경은 1pix 투명 GIF를 통해 표시됩니다.

6. ---

   6.에드의 대답에 구축, 내가 좋아하는 무언가를보고하는 것을 선호합니다 :

   에드의 대답에 구축, 내가 좋아하는 무언가를보고하는 것을 선호합니다 :

   function PreLoadImage( srcURL, callback, errorCallback ) {
        var thePic = new Image();
   
        thePic.onload = function() {
             callback();
             thePic.onload = function(){};
        }
   
        thePic.onerror = function() {
             errorCallback();
        }
        thePic.src = srcURL;
   }
   

   콜백은 적절한 위치에 이미지를 표시 및 / 스피너의 숨기기를 폐기하고, errorCallback은 "beachballing"에서 페이지를 방지 할 수 있습니다. 모든 이벤트는, 어떤 타이머 또는 폴링을 구동하지, 플러스 당신은 당신이 어디 이벤트를 설정하는 동안 문이 이미지가 완성 된 경우로드를 확인하는 경우 추가를 추가 할 필요가 없습니다 - 그들은 사전에 설정하고 있기 때문에 그들은 상관없이 어떻게 실행할 것 신속하게 이미지를로드합니다.

7. ---

   7.내가 jQuery 플러그인을 작성했습니다 몇 년 전에있는 자동 스피너를 표시 핸들 http://denysonique.github.com/imgPreload/

   내가 jQuery 플러그인을 작성했습니다 몇 년 전에있는 자동 스피너를 표시 핸들 http://denysonique.github.com/imgPreload/

   소스 코드에서 찾고 스피너를 표시 할 때 감지와 함께로드 된 이미지의 중앙에 표시와 함께 당신을 도울 것이다.

8. ---

   8.@의 duddle의 JQuery와 방법 등의 I하지만 부하를 찾을 수는 () 항상 (예 : 이미지가 IE에서 캐시에서 검색 할 때로) 호출되지 않습니다. 내가 대신이 버전을 사용합니다 :

   @의 duddle의 JQuery와 방법 등의 I하지만 부하를 찾을 수는 () 항상 (예 : 이미지가 IE에서 캐시에서 검색 할 때로) 호출되지 않습니다. 내가 대신이 버전을 사용합니다 :

   $('img.example').one('load', function() {
     $('#spinner').remove();
   }).each(function() {
     if(this.complete) {
       $(this).trigger('load');
     }
   });
   

   이 호출은 최대 한 시간을로드하고 즉시 이미로드가 완료입니다.

9. ---

   9.당신이 제대로 중심을 상대 위치를 사용할 수 있도록 당신은 높이와 너비를 알고, 차트로 사업부에 같은 크기를 스피너를 넣어.

   당신이 제대로 중심을 상대 위치를 사용할 수 있도록 당신은 높이와 너비를 알고, 차트로 사업부에 같은 크기를 스피너를 넣어.

10. ---

    10.이외에도 lowsrc 옵션에서, 나는 또한 IMG의 컨테이너에 배경 이미지를 사용했습니다.

    이외에도 lowsrc 옵션에서, 나는 또한 IMG의 컨테이너에 배경 이미지를 사용했습니다.

11. ---

    11.이미지 SRC는 (HTTP 404 오류)가 존재하지 않는 경우 콜백 함수라고도주의하십시오. 이를 방지하기 위해 이미지의 폭을 확인할 수 있습니다, 같은 :

    이미지 SRC는 (HTTP 404 오류)가 존재하지 않는 경우 콜백 함수라고도주의하십시오. 이를 방지하기 위해 이미지의 폭을 확인할 수 있습니다, 같은 :

    if(this.width == 0) return false;
    

12. ---

    12.@ 이안의 솔루션은 나에게 좋은 보인다. 유일한 것은 내가 변화 대신의 setTimeout을 사용하여, 나는 시도하고 이미지 '로드'이벤트에 후크 것입니다 것입니다. 이미지를 다운로드하는 데 시간이 더 삼초보다 오래 걸리는 경우이 방법은, 당신은 여전히 ​​스피너를 얻을 수 있습니다.

    @ 이안의 솔루션은 나에게 좋은 보인다. 유일한 것은 내가 변화 대신의 setTimeout을 사용하여, 나는 시도하고 이미지 '로드'이벤트에 후크 것입니다 것입니다. 이미지를 다운로드하는 데 시간이 더 삼초보다 오래 걸리는 경우이 방법은, 당신은 여전히 ​​스피너를 얻을 수 있습니다.

    이 다운로드에 시간이 덜 걸리는 경우 반면에, 당신은 3 초 미만의 스피너를 얻을 수 있습니다.

13. ---

    13.나는 브라우저 캐시를 방지하기 위해 어떤 임의의 숫자를 추가합니다.

    나는 브라우저 캐시를 방지하기 위해 어떤 임의의 숫자를 추가합니다.

from https://stackoverflow.com/questions/51352/how-to-show-a-spinner-while-loading-an-image-via-javascript by cc-by-sa and MIT license