在滾動期間預加載圖像

Question

我正在使用Jquery在頁面滾動時更改圖像的來源。然而，目前他們正在加載，因爲他們顯示，我想讓他們預先載入幾個圖像之前顯示。

HTML

<img src="/img/1.jpg" /> 

JQuery的

$(window).load(function(){ 
// Array of images to swap between 
var images = [/img/1.jpg, /img/2.jpg, /img/3.jpg, /img/4.jpg]; 

var totalImages = images.length; 

var documentHeight = $(document).height(); 

// Work out how often we should change image (i.e. how far we scroll between changes) 
var scrollInterval = Math.floor(documentHeight/totalImages); 

$(document).scroll(function() { 
// Which one should we show at this scroll point? 
i = Math.floor($(this).scrollTop()/scrollInterval); 
// Show the corresponding image from the array 
$('img').attr('src', images[i]); 
}); 
});//]]> 

CSS

img { 
position: fixed; 
top: 0; 
left: 0; 
height: 100%; 
} 
body { 
height: 5000px; 
} 

嘗試。 我想補充類似這樣的東西，

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

    i = Math.floor([i]+'1'); 

    preload([[i]]); 
} 

，但找不出如何代碼吧...（新建JS）

Answer 1

裏面你的循環。

var nextTenImages = images.slice(i, i+10);  
// preload the next image 
preload(nextTenImages); 

的jsfiddle：http://jsfiddle.net/gvee/ygkWH/8/

編輯：感謝預加載圖像下面SO話題：Preloading images with jQuery