1

Нужно на маленьких экранах убрать тяжелые элементы которые на сайте появляются на больших экранах, но не просто скрыть, а сделать так чтобы браузер их не загружал и подгружал только на большом экране.
Ведь если использовать display:none; то браузер все равно загрузит элемент, но просто его не отобразит.

4
  • в чем проблема?
    – Grundy
    3 фев 2016 в 8:28
  • Нужно сделать так чтобы браузер загружал элемент только на определенном допустим на меленьком экране, а на других не загружал 3 фев 2016 в 8:30
  • Не просто не показывал, а именно не подгружал 3 фев 2016 в 8:31
  • зависит от разметки, вариантов может быть много, от отдельной версии для маленького разрешения, до подгрузки по ajax, по предоставленному описанию сложно сказать, что именно больше подойдет
    – Grundy
    3 фев 2016 в 8:39

1 ответ 1

3

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

Display: none Временно удаляет элемент из документа. Занимаемое им место не резервируется и веб-страница формируется так, словно элемента и не было.

Добавление блока через javascript

var third = document.createElement('div'); // создание нового элемента
third.className = "third"; // присвоение ему класса
third.innerHTML = "<span>third</span>"; // наполнение его потомками

window.onresize = function() { // отслеживание изменения размеров окна
  if (!(document.querySelector('.third')) && window.innerWidth < 500) {
    // проверка на существование блока и на размер окна меньше 500 пикселей
    document.getElementById('main').appendChild(third); // добавление чайлда
  } else if (window.innerWidth > 500) {
    // альтернативная провека на размер окна больше 500 пикселей
    document.getElementById('main').removeChild(third); // удаление чайлда
  }
}
.first {background: red;}
.second {background: green;}
.third {background: blue;}
#main {color: white; font-size: 24px;}
<div id="main">
  <div class="first"><span>first</span></div>
  <div class="second"><span>second</span></div>
</div>

4
  • 1
    Полностью согласен, проблема просто не в том чтобы скрыть элемент, а в том чтобы его браузер не подгружал, чтобы снизить время подгрузки сайта. А при использовании display:none; он да скрывается все хорошо, но в самом начале когда браузер загружает страницу он же загружает также и контент которому присвоено свойство display:none; но просто его не отображает, если я не прав в понимании display:none; просьба поправить. 3 фев 2016 в 8:37
  • Можете использовать JS, чтобы добавлять элемент на нужных разрешениях, например.
    – lexxl
    3 фев 2016 в 8:41
  • А можете скинуть пример на js, я в нем плох просто, но по примеру постораюсь разобраться 3 фев 2016 в 8:43
  • Обновил решение: вынес переменные за пределы if для правильной видимости извне, добавил удаление чайлда в пример
    – lexxl
    3 фев 2016 в 11:46

Ваш ответ

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

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