2

Есть достаточно длинный лендинг, верстка на bootstrap. На нем есть несколько блоков с изображениями, которые не должны отображаться на экранах < 992px Как сделать чтобы эти блоки вообще не подгружались, тем самым уменьшали время загрузки страницы на моб.. Желательно способ без js, но если такого нет, то подойдет и с js.

1
  • чтобы вообще не подгружались их надо добавлять или не добавлять через скрипт, к сожалению по другому никак, в других случаях они будут подгружатся 23 июн 2020 в 8:17

1 ответ 1

1

В html5 появился новый тег picture, который позволяет не просто скрывать/открывать разные изображения для разных размеров экрана, но именно не допускать их загрузки (в отличие от скрытия с помощью css). Чтобы убедиться в этом, откройте в отладчике Chrome вкладку Network и проследите за загрузкой ресурсов.

<picture>
  <source srcset="https://avatars.mds.yandex.net/get-pdb/2049822/b2063185-8541-4936-9cfa-5f49ce6b855c/s1200" media="(min-width: 991px)">
  <source srcset="https://avatars.mds.yandex.net/get-pdb/1043578/97c87fa8-e5ce-4add-8b6d-3952cf90f822/s1200" media="(min-width: 767px)">
  <source srcset="https://avatars.mds.yandex.net/get-pdb/1748217/795c690e-e9b1-4e2f-93cc-6449379679b5/s1200" media="(min-width: 575px)">
  <img src="" alt="">
</picture>

1
  • Хм, интересно... Попробую
    – vantal
    23 июн 2020 в 8:50

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.