делают браузеры ленивыми изображениями загрузки по умолчанию

Question

Кажется, что Chrome lazy загружает изображения только тогда, когда они необходимы. Например, изображение для :hover загружается только тогда, когда мышь зависает над элементом. Это ожидаемое поведение? Включает ли он все изображения или только те, которые определены для псевдоклассов? Как заставить его загружать все изображения после загрузки страницы?

Answer 1

Хром не «предварительно загружает» изображения, которые не показаны в акте, и, будучи этим заметным эффектом, весь современный браузер не должен.

К «сила» браузер, имеющей все изображения готовых в кэше при необходимости вы можете следовать различному approuches:

1) Preload необходимых изображений с Javascript, вы можете использовать что-то вроде этого:

var prld = ["one.gif", "two.gif", "three.jpg", "..."]; 
var img = []; 
for (i = 0; i < prld.length; i++) { 
    img[i] = new Image(); 
    img[i].src = prld[i]; 
} 

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

2) Второй метод имеет другой подход, он основан на идее, что с классической предварительной загрузкой Javascript у вас есть все равно, чтобы сделать так много «звонков», как изображения на самом деле. Таким образом, 10 изображений с предварительной загрузкой вызывают 20 вызовов на сервер ... на самом деле это не замечательная вещь, потому что «задержка» вызовов замедляет всю загрузку страницы ... Итак, мы помещаем несколько изображений в один файл (например, «головоломка»), чем мы помещаем изображения в качестве фона (например, из пустого DIV), передавая другое расположение фонового CSS. Не нужно создавать уникальный файл для ВСЕХ изображений, например, вы решили бы создать несколько мозаик двух изображений только для целей предварительной загрузки; поэтому: hover «заменит» фон, а не сделает замену. Методика описана здесь: http://www.w3schools.com/css/css_image_sprites.asp

Каждый из этих меток имеет свои недостатки, это зависит от ситуации.

В целом, как правило, я бы избегал «зависания» вообще, принимая во внимание, что на мобильном опыте, в принципе, без смысла ... и это приведет к дополнительным усилиям, чтобы избежать мобильная «extraload» бесполезная contens ...