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

Question

[Антон Вебсайтовский]

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

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

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

Как скрыть чтобы он не грузился, тем самым ускорил на мобильной версии загрузку.

Comments

[shmatuan]

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

Это при visibility: hidden;

[Антон Вебсайтовский]

shmatuan, display: none; он же скрывает, но объект грузится.

Answer 1

[tempick]

Ну я обычно на PHP определяю тип устройства с библиотекой Mobile Detect и вывожу, в зависимости от того, десктоп или мобилка, необходимые блоки. Не уверен, что это самый правильный и оптимальный вариант, но мне норм)

Answer 2

[Денис И.]

давайте попробуем посмотреть на вопрос по другому : вы уверены что есть смысл экономить те 2-5-10кб текста на который уменьшится объем страницы из за этого неподгруженнооо дива ?
с сегодняшними скоростями на мобилках и тарифами - разницы видно не будет.

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

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

Answer 3

[nvdfxx]

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

Comments

[Антон Вебсайтовский]

сделать через js я так понимаю, пример бы.

Answer 4

[alex-1917]

Точнее всего определение мобилок происходит через JS.

1. Определяй мобилку.
   
2. Отправляй на сервер флаг.
   
3. Подгружай то, что нужно.
   

Гемора целый вагон, плюсов маленькая тележка, заказчику достаточно проапгрейдить тариф хостинга и вся ваша работа нахрен будет не нужна. Вернее, на круг это выйдет дешевле)))
И при этом встает вопрос с кешированием, встает довольно жестко.
Поэтому медиа-запросы наше всё!

Comments

[Антон Вебсайтовский]

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

Answer 5

[Ольга Исакова]

Обычно для этого используют 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...

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

Comments

[Антон Вебсайтовский]

посмотрел, не все ссылки пашут, в последней, да пример, но там скрыть подгрузку js и то с ошибкой.

[Ольга Исакова]

Антон Вебсайтовский, это из-за точек после URL - подвинула:)

[Антон Вебсайтовский]

Ольга Исакова, вообще не знаю что это и думаю так не смогу сделать https://ru.parceljs.org/code_splitting.html

[Антон Вебсайтовский]

типа того не пашет

<script>
      { 
        if (screen.width >= 600) document.write ('<script type="text/javascript" src="/media/adaptslider/responsiveslides.js" ></sc' + 'ript>');
      }
    </script>

[Антон Вебсайтовский]

Но это на подгрузку js при определенном экране. не то

[tempick]

Антон Вебсайтовский,

if (screen.width >= 600) {
    document.getElementById('block').innerHTML = '<div>aaaaa</div>';
}

[Антон Вебсайтовский]

tempick, не чет не пашет, пробовал. вставить блоки с дивами.

[tempick]

Антон Вебсайтовский, ошибся чутка, исправил

[Антон Вебсайтовский]

tempick, не такое не работает ), то что выше поправил.

вот такое нашел, но как применить.

<script>
      $(document).ready(function(){
        function resize_document(){
          var width = $(window).width();	
          if (width < 600){
            				
          }else{			
           
          }
        }
        resize_document();

        $(window).resize(function(){
          resize_document();
        });  
    <script>

[tempick]

Антон Вебсайтовский, у меня работает мой код)

[tempick]

Антон Вебсайтовский, я надеюсь, вместо слова "block" вы подставили нужный id?

[Антон Вебсайтовский]

tempick, да, я ставил ! он работает, но есть но, он скрывает слайдер весь этот код чтобы не грузился, если с мобилы захожу, а если с компа, то он показывает, но слайдер не работает вот в чем дело. а если вытаскиваю из кода слайдер то все ок.