var preloadImages = {};
preloadImages["image1"] = 'Images/image1.png';
preloadImages["image2"] = 'Images/image2.png';
...
preloadImages["image3"] = 'Images/image3.png';
preloadImages["default"] = 'Images/default.png';
function changeImage(key) {
if (typeof key != 'undefined') {
$('#image').attr('src', preloadImages[key]);
}
else {
$('#image').attr('src', preloadImages["default"]);
}
};
(function loadImages() {
for (key in preloadImages) {
var img = new Image();
img.src = preloadImages[key];
}
})();
Затем можно использовать типо onmouseover="changeImage('image1');" onmouseout="changeImage();".
По идее все должно работать, но картинки все равно мигают :/ Firebug показывает, что картинки подгружены. Но тогда я увидел следующее
В запросе идет хедер, что кэшировать не надо, а в ответе нифига. Картинка просто не кэшируется и каждый раз когда я меняю src она запрашивается заново. Осталось включить кэширование картинок и вроде бы должно заработать. Настройку кэширования статического контента в IIS6 можно посмотреть здесь. Ниже показано как настроить тоже самое в IIS7.
Сначала выбираем папку с картинками (тоже самое можно сделать и для css папка), затем открываем "Заголовки ответов HTTP".
Последовательность действий сверху вниз. После нажатия OK у вас будет 3 новых вещи:
1. В папке для которой мы настраивали кеш (Img) появится web.config (его надо включить в solution).
2. В заголовке ответа появится хедер Cache-Control, говорящий о том, что картинка кешируется. Даже если следующий раз браузер захочет потянуть картинку, то в firebug вы увидите в ответ на GET запрос не 200 код, а 206. Значит картинка берется из кэша.
3. Ну и 3 это результат, картинки не мигают.



