2012-08-14 2 views
1

Когда пользователь парит над определенной области экрана, создать DIV, а затем установить фон:Как заставить Chrome перестать получать одни и те же изображения?

div= document.createElement('div'); 

if (yellowBg) { 
    div.style.backgroundImage = 'url(\'../partHoverBgYellow.png\')'; 
} 
else { 
    div.style.backgroundImage = 'url(\'../partHoverBg.png\')'; 
} 

parent.appendChild(div) 

В Firefox и IE, фоновое изображение получает кэшированные после того, как извлекается в первый раз.

Но в хроме кажется, что он не кэширован. В результате div появляется перед тем, как его фон будет установлен каждый раз.

Я проверил с помощью Fiddler, и изображение действительно загружается каждый раз.

Есть ли способ предотвратить это?

ответ

3

Вы можете попробовать установить фон css и только изменить имя класса в коде. This jsfiddle показывает идею сделать это. На вкладке «Сеть» инструментов разработчика Chrome вы увидите, что изображения после начальной загрузки впоследствии загружаются из кеша.

код становится таким же простым, как: div.className = yellowBG ? 'yellowBG' : '';

В this jsfiddle изображения предварительно загружены.

+0

Спасибо. Это действительно хороший ответ. Теперь изображения появляются только один раз, не раз. Я думаю, чтобы наградить щедростью, мне нужен механизм, который каким-то образом предварительно загружает изображения, прежде чем я навещу. – Urbycoz

+0

Привет @ Урбикоз, рад, что он работает. Я разветвил jsfiddle, добавляя предварительную загрузку необходимых изображений. См. Обновленный ответ для ссылки. – KooiInc

0

См http://jsfiddle.net/X8SkS/3/

Если вы

var img=document.createElement('img'); 
var urls=["../partHoverBgYellow.png","../partHoverBg.png"]; 
img.src=urls[0]; 
img.src=urls[1]; 

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

div.style.display = 'block'; 

Chrome будет иметь изображения в кеш и div, и его фон будет отображаться одновременно.

+1

Благодарим за отзыв. Однако, боюсь, это не имеет никакого значения. Chrome всегда извлекает каждое изображение заново независимо от того, сколько раз он его извлекал. – Urbycoz

+0

Хотя странно это не делает это в коде jsfiddle. Может быть, потому, что я нахожусь на локальном хосте? – Urbycoz

+0

То же самое случилось со мной. Opera/Firefox/Safari/IE8 загружают изображения только один раз, а не хром, но в jsfiddle, Chrome в порядке. Значение сервера jsfiddle, по-видимому, отправляет «кеш-информацию за один год» в заголовок ответа. –

0

Если у вас есть контроль над заголовками, отправленных с сервера, включают в себя следующее:

Cache-control: public; max-age=31536000 

Таким образом, ваш образ получает кэшируются в течение года на стороне клиента. Это способ и семантика, которые должны выполняться каждым браузером. См. the W3C documentation для уточнения.

Также важно отметить, что этот заголовок отключит вас для обновления вышеупомянутого изображения.

+0

У меня нет никакого контроля над ними. Сожалею. – Urbycoz

Смежные вопросы