JS загрузка картинок в кеш.

Программирование, которое не связано с API.
Ответить
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

JS загрузка картинок в кеш.

Сообщение alexei »

В общем нужно:
1) Проверить есть ли нужные картинки в кеше.
2) Если нету, то загрузить их в кеш.

Вообще ситуация такая: Много картинок, которые при наведение и клике меняются. Надо что бы они не грузились по пол часа, а сразу.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: JS загрузка картинок в кеш.

Сообщение Александр »

Можно использовать спрайты, тогда картинки при наведении будут появляться сразу.
Можно загрузить все картинки в каком-нибудь скрытом блоке, чтобы они загрузились при первой загрузке страницы.

Для кэша, если на сервере есть mod_expire, то можно его задействовать.
Если картинки генерируются скриптом, то в header выдавать Expires, Last-Modified, Cache-Control.
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

Re: JS загрузка картинок в кеш.

Сообщение alexei »

Можно подробнее?

Код: Выделить всё

        $(".all").mouseover(function () {            if (this.src.indexOf('Sel') < 0) {                this.src = this.src.replace('Not', 'Blur');            }        });        $(".all").mouseout(function () {            this.src = this.src.replace('Blur', 'Not');        });
Примерно так.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: JS загрузка картинок в кеш.

Сообщение Александр »

Код: Выделить всё

<style>img {    background:url(http://flapps.ru/forum/styles/prosilver/imageset/site_logo.png);    width:50px;    height:50px;    background-repeat:no-repeat;}</style><img class="all" src="dot.gif" />
dot.gif - прозрачная картинка 1x1
Яваскриптом нужно будет менять не src, a background (или только background-position).

Код: Выделить всё

  $(".all").mouseover(function() {    $(this).css('background-image', 'url(http://flapps.ru/forum/styles/prosilver/imageset/site_logo.png)');    $(this).css('background-position', '-50px 0px');  }).mouseout(function(){    $(this).css('background-image', 'url(http://flapps.ru/forum/styles/prosilver/imageset/site_logo.png)');    $(this).css('background-position', '0 0');  });

Если быстрым и некрасивым способом, то просто загрузить все картинки сразу

Код: Выделить всё

<div style="display:none;"><img src="img1.png" /><img src="img2.png" /><img src="img3.png" /></div>
Пользователь их не увидит, но картинки загрузятся в кэш.
Аватара пользователя
alexei
Разработчик
Разработчик
Сообщения: 836
Зарегистрирован: 21 янв 2010, 19:44

Re: JS загрузка картинок в кеш.

Сообщение alexei »

А чем 1-й способ лучше?
Да и все равно картинки придется грузить также.
Аватара пользователя
Александр
Создатель сайта
Создатель сайта
Сообщения: 4574
Зарегистрирован: 27 сен 2009, 16:45

Re: JS загрузка картинок в кеш.

Сообщение Александр »

Первый способ логически продуман и может быть правильно реализован. В дальнейшём понять и доработать код будет проще.
Второй способ - это костыль. Иногда у людей весь код построен на костылях, получается говнокод. При доработках может возникать куча проблем.


Спрайт - это одна картинка, в которой соединено много разных. Грузится сразу вся картинка.
Например http://yandex.st/share/static/b-share-icon.png

При использовании спрайтов нужно менять свойство background-position.

Можешь создать к каждой своей картинке файл из двух состояний (обычное и при наведении), а если картинки небольшие, то можно создать один спрайт.
Ответить