воскресенье, 24 октября 2010 г.

Как заставить браузер принудительно кэшировать картинки

Недавно сталкнулся с проблемой, когда динамически меняешь картинки жаваскриптом, то они мигают при смене первое время. Это из-за того что тратится время на загрузку по требованию. Для решения проблемы надо просто картинки подгрузить раньше на загрузке страницы, выглядит это так:
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 это результат, картинки не мигают.

Комментариев нет:

Отправить комментарий