Здравствуйте. Проблема связана с предварительной подгрузкой изображений.
У меня в шапке есть несколько div'ов с бэкграундом, которые поочередно сменяют друг друга. С помощью jquery я сделал плавный переход из одного div'а в другой. При старте страницы всем div'ам кроме первого присваевается свойство display:none.
Чтобы решить проблему того, что каждый раз при появлении следующего блока происходит обращение к серверу за картинкой, я поисках в гугле, нашел решение и написал следующее:
var headImages = [];
var ihead = $("#head");
var size = "width:" + ihead.css("width") + "; height:" + ihead.css("height") + ";";
for (i = 1; i < 8; i++){
headImages[i] = new Image();
headImages[i].src = "Путь к изображениям"+i+".jpg";
ihead.append("<div id='head"+i+"' style='display:none; background-image:url(" + headImages[i].src + ");"+size+"'></div>");
}
То есть, насколько я понял, когда я создаю объект Image и указываю путь к картинке, javascript должен помещать его в кэш, и далее в программе, если есть обращение к этой картинке, она должна браться из кэша.
Однако этого не происходит! Картинка все равно грузится с сервера, и из-за этого происходит задержка.
В чем я заблуждаюсь? Может кто-нибудь мне что-либо объяснить?
Заранее спасибо.