infinte循環同時試圖顯示緩衝區符號作爲圖片預加載

我真的很沮喪與此。所以我使用JavaScript製作幻燈片，但在加載所有圖像時我想顯示一個緩衝符號..infinte循環同時試圖顯示緩衝區符號作爲圖片預加載

這裏是緩衝符號代碼..如果您有更好的方法，請講出來。

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

所發生的一切不過是一個無限循環。

來源

2011-12-18 Chris

爲什麼你甚至需要有'while'？ – 2011-12-18 03:17:26

你想要做這樣的事嗎？ http://jsfiddle.net/jHJeU/1/ – 2011-12-18 03:23:31

另一種方法是加載加載圖形（小，緩存，加載爲DOM加載），並在加載頁面後使用更大的圖像對其進行更新。示例：http://jsfiddle.net/jimschubert/a2LR5/您可以在http://ajaxload.info上構建加載圖形。編輯：我想我誤解了你的問題。 ajaxload.info網站可能會對你有很大的幫助。 – 2011-12-18 03:42:19

嘗試這樣：

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

我可能只使用GIF或CSS背景精靈，動態設置SRC可能是做到這一點的hackiest方式，我已經看到了迄今爲止，P

來源

2011-12-18 03:24:20 Esailija

好吧，我*想*我明白髮生了什麼; OP是想通過鑽井裝載圖形？ – 2011-12-18 03:32:07

@JaredFarrish是的我把它解釋爲在圖片加載時顯示一些加載欄動畫的方法。當然，它永遠不會動畫，因爲幀之間的時間間隔是300毫秒，但是meh：P – Esailija 2011-12-18 03:39:42

無論使用跳動器怎麼樣？ – 2011-12-18 03:44:33

這裏是一個遞歸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); 
}

再次，你會用

clearInterval(intervalId);

停止此要與第一圖像立即顯示出來啓動它你只需撥打

animate();

但有第一圖片等待300毫秒前顯示，你會做

intervalId = setTimeout(animate, 300);

來源

2011-12-18 03:31:34

不是'setInterval（）'的粉絲，尤其是這裏。在我看來，最好在最後一個末尾設置一個新的'setTimeout（）'。 – 2011-12-18 03:33:27

@JaredFarrish - 爲什麼？你不必每次都要遞歸調用setTimeout嗎？這不是setInterval的設計目的嗎？ – 2011-12-18 03:36:11

另外，當其他事件完成時（圖片加載，我相信）如何取消？ – 2011-12-18 03:36:15

infinte循環同時試圖顯示緩衝區符號作爲圖片預加載

回答

相關問題