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

Question

Я использую Javascript для создания простой панели просмотра изображений для своего сайта (ASP.NET), у меня есть 3 изображения, отображаемые в каждый момент времени, и пользователь может перейти к следующим или предыдущим изображениям с помощью двух кнопок , также когда пользователи нажимают мыши на каждое изображение, большая версия выбранного изображения отображается на отдельном DIV.

Единственная проблема заключается в том, что, когда пользователи просматривают изображения в течение выбранного времени, перед отображением большого изображения (при загрузке большого изображения в первый раз) происходит задержка. Как я могу решить эту проблему? есть ли способ, с помощью которого я могу первоначально загружать все большие изображения (конечно, они не должны быть видимыми), каковы мои варианты?

Есть ли способ, который я могу сделать это исключительно с помощью javascript? Я не хочу использовать jQuery

Answer 1

Создайте элемент на конце тела, как этот <div id="preload"> установите этот div на display:none и поместите изображения внутри него. Теперь, когда вы используете свою галерею, не должно быть задержки.

Answer 2

Другой способ, используя чистый JavaScript это один:

var img = new Image(); 
img.src = "url to image"; 

Вот оно! Это сделает запрос на сервер. Вы можете сделать это для остальных изображений. Если вы хотите знать, когда он наконец загружен, вы можете добавить событие загрузки. Например:

img.onload = function(){ 
    alert("image ready"); 
} 

Answer 3

Вы можете сделать простую функцию предварительной загрузки:

function preload() { 
    while(arguments.length) { 
     new Image().src = [].shift.call(arguments); 
    } 
} 

Затем использовать его, как это, на domready или в конце документа:

preload('img1.jpg', 'path/to/img2.jpg', 'img3.jpg'); 

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