Как правильней запретить загрузку элемента на мобильном устройстве?

Question

[massef]

Здравствуйте.

Подскажите пожалуйста как будет правильней запрещать загрузку элемента на мобильных устройствах.
Мне например нужно запретить инициализацию слайдера на разрешении 320px/568px и удалить его блок в HTML

1. Использовать modernizr

if($('.iphone').length){
     // код или вызов плагина
})

2. Тупо проверять на ширину window

if($(window).width() >= 320){
     // код или вызов плагина
     // этот код сработает только при ширине равной или больше 320
})

Если использовать modernizr то как же поступать в этом случае с другими мобильниками, добавлять проверку на ОС, touch события и т.д?
Или же есть еще способы?

Answer 1

[Dimitriy]

Можно и через Modernizr

Modernizr.load([
  {
    test: 320 >= window.screen.width,
    yep:   "big.js",
    nope: ["small.js", "small.css"]
  }
]);

Comments

[massef]

То что нужно, спасибо!

Answer 2

[Дмитрий Пятков]

через css media query:

@media (max-width: 320px) {
  .block {
    display:none;
  }
}

Comments

[massef]

Это не то. Я говорю про скрипты, в частности про инициализацию плагина. display: none; просто визуально скроет элемент, но он все равно будет грузится, тем самым делая загрузку страницы тяжелее.

[Дмитрий Пятков]

display none; например у img не вызывает события onload а вот visibility:hidden -- действительно грузит.

[massef]

Для картинок согласен, можно, но как тогда быть с файлом плагина, он ведь все равно будет загружаться и утяжелять страницу, вызов то все равно происходит. Соответственно смысл его грузить? Поэтому вопрос остается открытым.

Answer 3

[lifecom]

Условная загрузка для адаптивного веб-дизайна