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 that you have read and understand our privacy policy and code of conduct.

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