閃爍預加載的圖像用於後臺切換

我每隔一秒切換頁面背景。爲了防止閃爍，我預先加載圖像並在啓動時運行，但幾秒鐘後圖像再次加載，並可能隨機導致閃爍。 Chrome開發者工具正在說它是從緩存中加載的，但是在開始時它甚至不需要從緩存加載，並且它可以正常工作。閃爍預加載的圖像用於後臺切換

任何想法？這裏是例子：

gImages= [ 
    'assets/img/background/09.jpg', 
    'assets/img/background/01.jpg', 
    'assets/img/background/08.jpg' 
]; 

function preload(arrayOfImages) { 
    $(arrayOfImages).each(function(){ 
     (new Image()).src = this; 
    }); 
} 

preload(gImages); 

var currentImage = 0; 

var SwitchBackground = function() { 
    var image = $('#intro'); 
    image.css("background", 
       "url('assets/img/background/'+gImages[currentImage]"') 
       50% 0 no-repeat fixed'); 


    currentImage++; 

    if(currentImage == gImages.length) 
    { 
     currentImage = 0; 
    } 
}; 

window.setInterval(function() 
{ 
    SwitchBackground(); 
}, 1000);

哦，多了一個我注意到的事情，第一負載總是從（發起者）jQuery的1.10.2.js：4112。在啓動器上的鼠標懸停說了一些關於bootstraps，這也被使用。之後，發起者總是相同的，jquery-1.10.2.js：7031。有任何想法嗎？

編輯：jquery-1.10.2.js：7031是由我的代碼switchBackground調用觸發的。

所以是的，我的基本問題是閃爍的效果，我希望擺脫:)謝謝！

來源

2014-01-23 krizajb

當這個js代碼跑？它是否放置在標題內的'

您將需要等待所有圖像開始之前加載顯示他們

var count = 0; 
function preload(arrayOfImages) { 
    _.each(arrayOfImages, function(imageSource){ 
      var imageElement = new Image(); 
      imageElement.onload = function() { 
       count++; 
       if (count === arrayOfImages.length) { 
        tada();//here you activate your page 
       } 
      }; 
      imageElement.src = imageSource; 
    }); 
}

來源

2014-01-24 19:53:03 Mabedan

所以tada（）是我的$（document）.ready（function（）{}？不知道如何使用這個:) – krizajb

tada是您在頁面中顯示內容的地方。我寫的*進入*您的document.onready – Mabedan

謝謝，測試它：這裏是測試頁..它仍在工作中進行中http://www.dreamon.si/test/它適用於我，但有人說它仍然可以隨機閃爍 – krizajb

相關問題