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

Question

У меня есть страница миниатюр, которые меняют свою непрозрачность с помощью наведения с помощью скрипта обмена образцами, встроенного в jquery. Однако, когда я запускаю его на живом веб-сайте, он работает медленно, и вам нужно подождать, пока загрузится второе изображение, поэтому замена swover не произойдет сразу. Как бы я предварительно загрузил все изображения большого пальца во время загрузки страницы? сайт жить here

Вот HTML

<div class="span-16 last" id="thumbs"> 
     <div class="span-4"> 
      <a href="waterfront.php"><img src="images/thumbs/thumb1.gif" id="thumb1"></a> 
     </div> 

    </div><!--THUMBS ENDS--> 

здесь является JQuery

$("#thumb1").hover(
     function(){ 
      $("#thumb1").attr("src","images/thumbs/thumb1A.gif"); 
      }, 

     function(){ 
      $("#thumb1").attr("src","images/thumbs/thumb1.gif"); 

     }); 

Answer 1

Here is an article to help you.

Это создает img элементов в DOM.

Я часто делал это, создавая new Image(), а затем устанавливая его свойство src на изображение. Вы получаете событие, вызванное при загрузке, которое равно onload.

Так краткий пример будет

var preload = new Image(); 

preload.onload = function() { // I believe you need to define this before you set the src for IE 
    alert('loaded'); 
} 

preload.src = 'path/to/image.png'; 

Answer 2

Чтобы построить на ответ Алекса

var images = ['a.jpg','b.jpg','c.jpg']; 
var preload = []; 
for(i in images) 
{ 
    preload[i] = new Image(); 
    preload[i].src = images[i]; 
} 

Это предварительно загружает все изображения в images массиве. Сценарий предполагает, что вы заранее знаете, какие изображения вы хотите предварительно загрузить.

Answer 3

Просмотреть мои комментарии по решению, в котором я голосовал. Для получения дополнительной информации о добавлении истинного предварительного загрузчика с обратным вызовом см. Здесь: http://farinspace.com/jquery-image-preload-plugin/

С учетом того, что вы предварительно загрузите изображения для опрокидывания, вы можете не отображать меню до тех пор, пока эти изображения не будут загружены. Вы можете скрыть меню в init и показать его при обратном вызове onload.