Загрузка и выгрузка JavaScript с учетом CSS Media Queries - PullRequest
Новая
       4

Загрузка и выгрузка JavaScript с учетом CSS Media Queries

2 голосов
/ 30 марта 2012

Я использую CSS Media Queries для обеспечения адаптивности моего сайта: 

@media (min-width:1200px) {
    // DESKTOP STYLING
}

@media (max-width:1200px) {
    // MOBILE STYLING
}

Я использую https://github.com/paulirish/matchMedia.js для проверки Media Query 

if(min-width:1200px) {
    // DESKTOP JAVASCRIPT
} else {
    // MOBILE JAVASCRIPT
}

Так что изначально все работает нормально, когда мой экран <1200px, он показывает мобильную версию, если выше, то он показывает версию для настольного компьютера (также работает javascript). </p>

Проблема теперь в том, когда я начинаю изменять размер окна, например: 

1) LOADS DESKTOP JAVASCRIPT (EVERYTHING IS FINE)
2) RESIZE WINDOW < 1200px (SWITCH TO MOBILE TEMPLATE)
   LOADS MOBILE JAVASCRIPT (SITE BREAKS)
3) RESIZE WINDOW > 1200px (SWITCH TO DESKTOP TEMPLATE)
   LOADS DESKTOP JAVASCRIPT A SECOND TIME (SITE BREAKS EVEN MORE)

Так что мне было интересно узнать, как «выгрузить» javascript или, может быть, элегантный способ загрузить два разных файла javascript в зависимости от используемого медиазапроса?

Ответы [ 2 ]

3 голосов
/ 31 марта 2012

Сначала у вас может быть один JavaScript (соедините 2 вместе) и контроллер, который будет проверять, больше или нет ваш размер окна 1200.

Или вы можете попытаться обернуть файлы JavaScipt в два объекта и создать третий, который будет обрабатываться как контроллер. Через Ajax вы можете загружать и выгружать файлы (ничего не ломается, потому что у вас все еще есть контроллер) и переключаться между ними. Это проблема, хотя, потому что вам придется удалить всех слушателей, когда вы сделаете переключатель, и вам придется загрузить другой файл, который займет небольшое количество времени.

Надеюсь, это поможет. Хороший вопрос, кстати.

1 голос
/ 02 мая 2013

Я бы порекомендовал такую ​​библиотеку, как Enquire.js , вы всегда можете написать код триггера самостоятельно, но если у вас есть «слайд-шоу на рабочем столе» и «слайд-шоу на мобильном устройстве», вам нужно убедиться, что Вы уничтожаете неактивный при изменении размера, и у Inquire есть хороший API для этого, который включает триггер непревзойденного уровня.

Я имею дело с одним и тем же плагином для слайд-шоу для моего «слайд-шоу на рабочем столе» и «мобильного слайд-шоу», но мне нужны другие настройки (например, использование выравниваемого снизу пейджера по сравнению со следующей / предыдущей навигацией), который легко установить при загрузке страницы, но что, если устройство меняет медиа-запросы, точки останова при изменении ориентации и т. д.

...