Работает ли функция предварительной загрузки jQuery Image?

Question

Я написал функцию, которая будет загружать все большие изображения из галереи лайтбоксов, на которые ссылается ссылка (для тех, кто не знает) после загрузки всех небольших изображений $ (window) .load().

Вот код:

$(window).load(function() { 
    if ($('ul#gallery').length > 0) { 
     // make a container, fill in images and attach it to the page body 
     var c = $("<div />").attr({style: 'display: none', id: 'gallerypreload'}); 
     $("ul#gallery li > a").each(function() { 
      $('<img />').attr('src', $(this).attr('href')).appendTo(c); 
     }); 
     c.appendTo('body'); 
    } 
}); 

галерея выглядит следующим образом:

<ul id="gallery"> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
    <li><a href="/img/image.jpg" title="Image title"><img src="img/thumbnail.jpg" alt="Image title" /></a></li> 
</ul> 

Я хочу, чтобы это сделать, потому что браузер должен загрузить все эскизы, а потом поджать большие изображения для просмотр. Кроме того, я написал какой-то эффект затухания, который запускается также $ (window) .load().

Мой вопрос: ВСЕ ли браузеры загружают изображения, прикрепленные к корпусу в контейнере? Следовательно, он не отображается, теоретически они не должны загружать изображения или они? Должен ли я стиль или мой подход работает?

Спасибо.

Answer 1

Вы можете заставить преднагрузку путем создания JavaScript объектов изображения с СРК вы хотите поджать

$("ul#gallery li > a").each(function() { 
    var preload = new Image(); 
    preload.src = $(this).attr('href'); 
    $('<img />').attr('src', preload.src).appendTo(c); 
}); 

Тогда это не имеет значения, если теги IMG видны или не

---

Based на приведенных ниже комментариях этого должно быть достаточно, чтобы предварительно загрузить изображения:

$("ul#gallery li > a").each(function() { 
    var preload = new Image(); 
    preload.src = $(this).attr('href'); 
}); 

или даже

$("ul#gallery li > a").each(function() { 
    (new Image()).src = $(this).attr('href'); 
});