Предзагрузка картинок 

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

На самом деле, предзагрузка выполняется удивительно просто. В самом начале страницы вставляется небольшой скрипт:

<script language=JavaScript>
pic = new Image();
pic.src="test.jpg";
</script>

где test-jpg – предзагружаемая картинка, которая не отображается на странице, но в любой момент ее можно отобразить без дополнительного ожидания загрузки изображения.

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

<script language=JavaScript>
pic = new Image();
pic.src="sea_2.jpg";
</script>

<img src="sea_1.jpg" style='cursor: hand' onclick='this.src=pic.src'>
<img src="sea_1.jpg" style='cursor: hand' onclick='this.src="sea_3.jpg"'>

Изображения sea_2.jpg и sea_3.jpg абсолютно идентичны, но изображение sea_2.jpg уже хранится в переменной pic.

При нажатии на первую картинку, другая картинка отобразится моментально, так как она уже загружено, при нажатии на вторую – придется некоторое время подождать, пока она будет загружено