Как создать предварительный загрузчик изображений в карусели

Question

Я ищу способ предварительной загрузки изображений для карусели моего сайта. Они загружены при загрузке страницы. Есть ли современный элегантный способ сделать это?

Я пытался без успеха:

var images = []; 
    $('.gallery_panel').each(function(){images.push($(this).attr('src'));}); 
    $('.gallery_thumbs').each(function(){images.push($(this).attr('src'));}); 

и CSS преднагрузки:

<style> 
    #preloadedImages { 
    width: 0px; 
    height: 0px; 
    display: inline; 
    background-image: url(images/....png); 
    background-image: url(images/....png); 
    background-image: url(images/....png); 
    } 
</style> 

Answer 1

Ваша первая попытка была хорошим началом. В основном делайте что-то вроде этого:

var images = []; 

$('.gallery_panel').each(function(){ 
    var src = $(this).attr('src'); 
    var image = new Image(); 

    image.src = src; 
    images.push(image); 
}); 
$('.gallery_thumbs').each(function(){ 
    var src = $(this).attr('src'); 
    var image = new Image(); 

    image.src = src; 
    images.push(image); 
});