버퍼 심볼을 사진으로 표시하려고 시도하는 동안 루프가 반복되지 않습니다

Question

저는이 문제에 정말로 좌절하고 있습니다. 그래서 자바 스크립트로 슬라이드 쇼를 만들고 있지만 모든 이미지가로드되는 동안 버퍼링 심볼을 보여주고 싶습니다.

여기 버퍼링 심볼 코드가 있습니다. .

function loadAnimation(){ 
     setTimeout(
      "document.getElementById('main_photo_img').src = 'images/loadBar1.jpg'", 300); 
     setTimeout(
      "document.getElementById('main_photo_img').src = 'images/loadBar2.jpg'", 600); 
     setTimeout(
      "document.getElementById('main_photo_img').src = 'images/loadBar3.jpg';", 900); 
     } 

버퍼 애니메이션을 구성하는 3 개의 이미지를 표시합니다. 이미지가로드 될 때까지 재생을위한

내 코드는이 ..

은

while(!pic1.onload){ 
    loadAnimation(); 
} 

모든 것은 그래도 일이 무한 루프입니다. 이 같은

Answer 1

시도 뭔가 : 아마 그냥 GIF 또는 CSS를 배경 스프라이트를 사용하십시오

function loadAnimation() { 
    var i = 0, 
     timer; 
    (function k() { 
     var cur = i++ % 3 + 1; 
     document.getElementById('main_photo_img').src = 'images/loadBar' + cur + '.jpg'; 
     timer = setTimeout(k, 300); 
    })() 
    return { 
     cancel: function() { 
      clearTimeout(timer); 
     } 
    }; 
} 


.... 

var animation = loadAnimation(); 
pic1.onload = animation.cancel; //The cancel will be called when pic1 loads. You may add other code in the cancel function if needed 

, 동적 SRC 설정은 아마 내가 지금까지 본 적이이 작업을 수행 할 수있는 hackiest 방법입니다; P

Answer 2

여기에 재귀적인 setTimeout 버전이 있습니다.

var i = 0, intervalId; 
function animate(){ 
    var newImg = 'images/loadBar' + ((i++ % 3) + 1) + '.jpg' 
    document.getElementById('main_photo_img').src = newImg; 
    intervalId = setTimeout(animate, 300); 
} 

그리고 다시, 당신은 당신이 단순히

animate(); 

를 호출하려는 첫 번째 이미지는 즉시 보여주는를 시작하려면

clearInterval(intervalId); 

와이 중지 싶지만 처음을 가지고 이미지가 표시되기 전에 300 밀리미터를 기다리십시오.

intervalId = setTimeout(animate, 300);