Проблемы с адаптивными изображениями

[Sergik+]

Друзья не могу разобраться, есть 3 изображения сменяющихся при разных медиа-кверис,

изображения бэкграундом, при смене получаю неприятное мерцание белого фона при этом

изображения совсем уже порезал все три в общей сложности примерно 100кб, как этого можно

избежать ? По PageSpeed набираю 91 балл, причем знаю как сотку набрать но это не

уберет мерцания (:

[Bassline]

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

[Sergik+]

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

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

[Sergik+]

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

Спрайты не подошли к сожалению, background-position не могу скрестить с background-size: cover, если ширину

указывать то cover не работает а если не указывать то следующий спрайт вылазит, пробовал и вертикально и

горизонтально.

[boond]

Зачем именно бэкграунд? position:relative и z-index спасут отца русской демократии. Только подгружать картинки надо до начала всех манипуляций. Например, где-нибудь в конце с display:none

[Sergik+]

Зачем именно бэкграунд? position:relative и z-index спасут отца русской демократии. Только подгружать картинки надо до начала всех манипуляций. Например, где-нибудь в конце с display:none

По большому счету я вообще выдумал проблему Никто в здравом уме не будет сжимать и разжимать сайт

просто так, все манипуляции только для адаптивности сайта, а при открытии с различных устройств как раз

никаких проблем не будет.

[Switch74]

данная проблема не ясна для меня

1. у вас разные фоны на разных разрешениях?

2. если нет и все они приближены к 100кб, то по мне можно оставить один с максимальным разрешением и показывать всегда его

3. создание разных фонов через media делается для того, чтобы на маленьких устройствах и не грузить здоровые картинки, спрайты же грузят еще и не нужные - лишняя трата трафика/времени

4. если же хочется, чтобы и при изменении размеров окна красиво адаптировался сайт:

можно разделить слои фонов

подгружать их одновременно как советовали выше

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

[Sergik+]

данная проблема не ясна для меня

1. у вас разные фоны на разных разрешениях?

2. если нет и все они приближены к 100кб, то по мне можно оставить один с максимальным разрешением и показывать всегда его

3. создание разных фонов через media делается для того, чтобы на маленьких устройствах и не грузить здоровые картинки, спрайты же грузят еще и не нужные - лишняя трата трафика/времени

4. если же хочется, чтобы и при изменении размеров окна красиво адаптировался сайт:

можно разделить слои фонов

подгружать их одновременно как советовали выше

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

Была идея у меня в футере попробовать разные картинки для разных разрешений, а если честно то просто

моск себе взрываю задачками.

Картинка 135кб, если чуть разрешение уменьшить то на фулл-хд не очень смотрится (

Edited November 25, 2014 by Sergik+

[Switch74]

тогда могу предложить такой вариант, грузить по media от малого к большему с разделением слоев:

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

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

Решение всех проблем - скрипт, но это по желанию.