Загружаются ли элементы, которые display:none?

Question

[Lici]

То есть могу ли я урезать физический размер загружаемой страницы для мобильных устройств просто проставив всем тяжелым элементам display none в css через min-width свойство?

Answer 1

[Алексей Кулешов]

Нет. Физический размер - это фактический объем HTML, вне зависимости от его настроек в CSS, однако скорость отрисовки увеличится (если указать display:none в секции head, желательно inline-кодом), т.к. нет необходимости рисовать "лишнее" - мелочь, а глазу приятно!))

Comments

[Lici]

То есть если картинка весом в 1мб стоит с display:none и находится в блоке div со свойством display:none то она даже так будет грузиться?

Answer 2

[Mangor]

проставив всем тяжелым элементам display none

Возможно вам поможет "Загрузка картинок по требованию"

Comments

[Lici]

<img src="1.jpg" style="display:none">
<div style="display:none"><img src="2.jpg"></div>
<div style="display:none"><img src="3.jpg" style="display:none"></div>

Какие из картинок 1-2-3 прогрузятся, а какие - нет?

[Алексей Кулешов]

Все загрузятся!

[Алексей Кулешов]

"Чтобы картинка в скрытом блоке не загружалось, нужно вынести ее из атрибута src." - кстати не факт что в мобильном браузере оно не будет грузится!

[Lici]

Значит либо делать фоном блока либо на JS/php делать проверку разрешения и потом либо отдавать код ее либо нет. Так?

[Gran Torino]

используйте аттрибут srcset, если речь о том, какую картинку грузить в зависимости от размеров экрана

Answer 3

[Максим Е]

Размер страницы = вес html(выдаваемой страницы) + скрипты + css + изображения.
Если скрыть через display=none, то содержимое между тегами с таким стилем просто не будет выводится, но вес не уменьшится. Если в нем будет картинка, то она будет участвовать в "формуле" первой строке ответа.