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 это результат, картинки не мигают.
Комментариев нет:
Отправить комментарий