스크롤하는 동안 이미지 미리로드

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

그러나 그것을 코딩하는 방법을 알아낼 수 없습니다 ... 루프 내부

Answer 1

(뉴 JS로).

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

JSFiddle : Preloading images with jQuery