2012-06-21 40 views
1

以下代碼是我正在嘗試執行的操作的總結,即開發一個允許用戶左右滾動顯示圖像的界面。圖像從屏幕開始,然後到中心,並將前一個圖像從屏幕上退出。正確高效地執行後臺加載

我很想談談我對代碼的一些建議或者關於如何更好地實現它的建議。顯然,如果用戶快速點擊箭頭,無疑會破壞腳本,所以我需要幫助。也許阻止箭頭在「加載」狀態時被點擊?

我還應該提到backgroundLoad會預載下一張和上一張圖像。當我說「屏幕外」時,它會對中心生成動畫。我不是在尋找圖庫/燈箱解決方案。這個問題更多的是關於預加載過程。

var imgArray=[]; 
    var b = 0; 

    function loadImage(ini){ 
     b = ini; 

     //preload image 
     var num_loaded = 0; 
    imgArray[ini] = new Array();; 



    for(var i=0;i<2;i++){ 
     imgArray[ini][i] = new Image(); 

     imgArray[ini][i].onload = function(){ 
      num_loaded++; 

      if(num_loaded == 1){ 

      } 

      if(num_loaded == 2){ 
       //do something 




       backgroundLoad(ini+1); 



      } 

     } 

     imgArray[ini][i].src = ArrayOfFiles[ini][i]; 

    } 


} 

function backgroundLoad(ini){ 
    var num_loaded = 0; 
    imgArray[ini] = new Array();; 

    for(var i=0;i<2;i++){ 
     imgArray[ini][i] = new Image(); 

     imgArray[ini][i].onload = function(){ 
      num_loaded++; 


      if(num_loaded == 2){ 



       // loaded 




      } 

     } 

     imgArray[ini][i].src = ArrayOfFiles[ini][i]; 

    } 


} 

$("div#arrow-left").click(function(){ 

    loadImage(b+1); 
}); 

$("div#arrow-right").click(function(){ 

    loadImage(b-1); 
}); 

回答