JavaScript를 통해 이미지를 로드하는 동안 스피너를 표시하는 방법

StackOverflow https://stackoverflow.com/questions/51352

  •  09-06-2019
  •  | 
  •  

문제

저는 현재 단일 차트(.png 이미지)를 표시하는 페이지가 있는 웹 애플리케이션을 개발 중입니다.이 페이지의 다른 부분에는 클릭하면 전체 페이지가 다시 로드되고 페이지 중앙에 있는 차트를 제외하면 이전과 완전히 동일하게 보이는 일련의 링크가 있습니다.

내가 원하는 것은 페이지에서 링크를 클릭하면 페이지의 차트만 변경되는 것입니다.페이지 크기가 약 100kb이므로 작업 속도가 엄청나게 빨라지고 이를 표시하기 위해 전체 페이지를 다시 로드하고 싶지는 않습니다.

나는 다음 코드를 사용하여 지금까지 작동하는 JavaScript를 통해 이 작업을 수행해 왔습니다.

document.getElementById('chart').src = '/charts/10.png';

문제는 사용자가 링크를 클릭하면 차트가 변경되기까지 몇 초가 걸릴 수 있다는 것입니다.이로 인해 사용자는 자신의 클릭이 아무 것도 수행되지 않았거나 시스템의 응답 속도가 느리다고 생각하게 됩니다.

내가 원하는 것은 이미지가 로드되는 동안 이미지가 있는 위치에 스피너/고동/상태 표시기를 표시하는 것입니다. 따라서 사용자가 링크를 클릭하면 최소한 시스템이 입력을 받아 그것에 대해 뭔가를 하고 있다는 것을 알 수 있습니다. .

나는 몇 가지 제안을 시도해 보았습니다. 의사 시간 초과를 사용하여 스피너를 표시한 다음 다시 이미지로 돌아갔습니다.

내가 가진 좋은 제안은 다음을 사용하는 것입니다.

<img src="/charts/10.png" lowsrc="/spinner.gif"/>

스피너가 표시되는 차트보다 훨씬 작다는 점을 제외하면 이상적입니다.

다른 아이디어가 있나요?

도움이 되었습니까?

해결책

저는 이와 같은 방법을 사용하여 이미지를 미리 로드한 다음 이미지 로드가 완료되면 자동으로 자바스크립트를 다시 호출했습니다.이미지가 이미 캐시되어 콜백을 호출하지 않을 수 있으므로 콜백을 설정하기 전에 완료되었는지 확인해야 합니다.

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

다른 팁

다음을 제공하는 정적 이미지를 표시할 수 있습니다. 회전하는 바퀴의 착시 현상, 이와 같은 것.

사용하여 짐() 의 방법 jQuery, 이미지가 로드되는 즉시 작업을 쉽게 수행할 수 있습니다.

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

보다: http://api.jquery.com/load-event/

setTimeout() 함수의 강력한 기능을 사용하십시오(더 많은 정보) - 이를 통해 나중에 함수 호출을 트리거하도록 타이머를 설정하고 호출할 수 있습니다. 습관 현재/다른 기능의 실행을 차단합니다(비동기).

차트 이미지 위에 스피너가 포함된 div를 배치하고 CSS 표시 속성을 없음으로 설정합니다.

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

nbsp는 스피너가 숨겨져 있을 때 div 축소를 중지합니다.이것이 없으면 스피너 표시를 전환할 때 레이아웃이 "전환"됩니다.

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

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

그런 다음 새 큰 이미지를 로드할 때 먼저 src를 미리 로드된 투명한 1픽셀 gif로 설정하세요.

예를 들어

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

Large_image.jpg가 로드되는 동안 배경은 1pix 투명 gif를 통해 표시됩니다.

Ed의 답변을 바탕으로 다음과 같은 내용을 보고 싶습니다.

function PreLoadImage( srcURL, callback, errorCallback ) {
     var thePic = new Image();

     thePic.onload = function() {
          callback();
          thePic.onload = function(){};
     }

     thePic.onerror = function() {
          errorCallback();
     }
     thePic.src = srcURL;
}

콜백은 이미지를 적절한 위치에 표시하고 스피너를 삭제/숨길 수 있으며, errorCallback은 페이지가 "해변에서 놀고 있는" 것을 방지합니다.모든 이벤트 기반, 타이머 또는 폴링 없음, 이벤트를 설정하는 동안 이미지 로드가 완료되었는지 확인하기 위해 추가 if 문을 추가할 필요가 없습니다. 사전에 설정되어 있으므로 어떻게 실행하든 관계없이 트리거됩니다. 이미지가 빠르게 로드됩니다.

얼마 전에 나는 스피너 표시를 자동으로 처리하는 jQuery 플러그인을 작성했습니다. http://denysonique.github.com/imgPreload/

소스 코드를 살펴보면 스피너를 표시할 시기를 감지하고 로드된 이미지 중앙에 표시하는 데 도움이 될 것입니다.

저는 @duddle의 jquery 메서드를 좋아하지만 load()가 항상 호출되지는 않는다는 사실을 발견했습니다(예: IE의 캐시에서 이미지를 검색할 때).대신 이 버전을 사용합니다.

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

이 호출은 최대 한 번만 로드되며 이미 로드가 완료된 경우 즉시 로드됩니다.

차트와 동일한 크기의 div에 스피너를 넣으면 높이와 너비를 알 수 있으므로 상대 위치 지정을 사용하여 올바르게 가운데에 배치할 수 있습니다.

lowsrc 옵션 외에도 나는 또한 background-image 에 img님의 컨테이너입니다.

이미지 src가 존재하지 않는 경우에도 콜백 함수가 호출된다는 점에 유의하세요(http 404 오류).이를 방지하려면 다음과 같이 이미지 너비를 확인할 수 있습니다.

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

@iAn의 솔루션이 나에게 좋아 보입니다.내가 변경할 유일한 것은 setTimeout을 사용하는 대신 이미지 'Load' 이벤트에 연결하는 것입니다.이렇게 하면 이미지를 다운로드하는 데 3초 이상 걸리더라도 스피너가 계속 표시됩니다.

반면에 다운로드하는 데 시간이 덜 걸리는 경우에는 3초 이내에 스피너를 얻을 수 있습니다.

브라우저 캐시를 피하기 위해 임의의 숫자를 추가하겠습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top