Как правильно скрывать объекты в адаптивной версии сайта?

Здравствуйте.
Вопрос глупый, можно скрывать подобный примером.

@media only screen and (min-width:600px) {
  .hoderok{
    display: none;
  }
}


Но при таком скрытии, все равно идет подгрузка данного объекта, мы просто не видим его.

Как скрыть чтобы он не грузился, тем самым ускорил на мобильной версии загрузку.
  • Вопрос задан
  • 734 просмотра
Пригласить эксперта
Ответы на вопрос 5
@tempick
Ну я обычно на PHP определяю тип устройства с библиотекой Mobile Detect и вывожу, в зависимости от того, десктоп или мобилка, необходимые блоки. Не уверен, что это самый правильный и оптимальный вариант, но мне норм)
Ответ написан
@dplsoft
давайте попробуем посмотреть на вопрос по другому : вы уверены что есть смысл экономить те 2-5-10кб текста на который уменьшится объем страницы из за этого неподгруженнооо дива ?
с сегодняшними скоростями на мобилках и тарифами - разницы видно не будет.

хотите экономить трафик - урезайте графику, больше эффекта будет. имхо.

хотите ускориться - уменьшайте объем джаваскрипта - время работы js на устройстве с сегошняшним "буллщитвеб-js" зачастую в разы больше чем время подгрузки ресурсов, которые этот скрипт отрабатывает.
Ответ написан
@nvdfxx
Senior Pomidor developer
отдавать в зависимости от девайса нужные файлы с сервера или крит. скриптами подгружать их
Ответ написан
alex-1917
@alex-1917
Если ответ помог, отметь решением
Точнее всего определение мобилок происходит через JS.
  1. Определяй мобилку.
  2. Отправляй на сервер флаг.
  3. Подгружай то, что нужно.


Гемора целый вагон, плюсов маленькая тележка, заказчику достаточно проапгрейдить тариф хостинга и вся ваша работа нахрен будет не нужна. Вернее, на круг это выйдет дешевле)))
И при этом встает вопрос с кешированием, встает довольно жестко.
Поэтому медиа-запросы наше всё!
Ответ написан
Обычно для этого используют code splitting и dynamic import(). Легче всего использовать сборщик (Webpack, Parcel). С Parcel работать легко, даже если вы никогда не использовали сборщики, и есть доки на русском: https://ru.parceljs.org/code_splitting.html . Он как раз использует динамический импорт, чтобы подгружать модули, когда нужно.

Без сборщика динамический импорт пока плохо поддерживается: https://caniuse.com/#feat=es6-module-dynamic-import . Но примеры есть здесь: https://developers.google.com/web/updates/2017/11/...

Без динамического импорта и сборщиков есть вариант как в первом ответе здесь: https://stackoverflow.com/questions/18946403/using...

Но освоить сборщик точно не повредит, ещё и код оптимизирует.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы