Intereting Posts
Измените порядок сортировки сообщений для включения настраиваемого поля Попытка реализовать .pdf Загрузка файлов в Admin для плагина Короткий код для мест Меню, отображаемое при посещении текущей страницы Невозможно получить доступ после обновления Добавление нового сообщения через пользовательский тип сообщения предлагает мне «Slug» в качестве опции, как мне получить больше? Добавление массива из строки запроса в WP meta_query Как изменить шаблон страницы? Как я могу позволить пользователю публиковать только 5 сообщений в месяц? Почему некоторые крючки не работают внутри контекста класса? Как отображать элементы разных типов сообщений? Добавить атрибут данных в элемент элемента списка в меню Как разрешить использование вкладок в контенте? Исключить массив аргументов дочерних страниц Добавьте два изображения с Sweet Testimonials

Загрузка содержимого динамически и изменение размера события

В сложных макетах интенсивное использование Media Queries влияет на производительность, поскольку мобильный браузер по-прежнему загружает все скрытые элементы.

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

Я работаю над шаблоном, который должен превратиться в мобильную версию, когда ширина экрана меньше 1080 пикселей. Для этого я решил объединить Modernizr.mq с прослушивателем событий изменения размера.

Вы знаете лучший подход?

До сих пор мой код модернизации: http://jsfiddle.net/c4BcR/

Solutions Collecting From Web of "Загрузка содержимого динамически и изменение размера события"

Помните, что PHP (wordpress) выполняется на сервере, javascript выполняется в браузере.

Итак, вы намерены:

  1. загрузить URL-адрес вашего сайта (запрос GET отправляется на сервер)
  2. Сервер отвечает минимальным html, содержащим enquire.js и ваш скрипт с enquire.register stuff
  3. enquire.js распознает разрешение и запускает функцию js
  4. функция, вызванная enquire.js запускает вызов ajax (это второй запрос на сервер)
  5. Сервер отвечает на вызов ajax с помощью html из вашего шаблона и с помощью jquery.html () вы помещаете html в тело страницы. Если вы хотите избежать загрузки jquery, вы можете вывести json с сервера и использовать чистую js templating engine, например Pure, чтобы преобразовать json в html в тело.

Это оптимизировано? Не для меня.

  • Для каждой загрузки страницы вы запускаете 2 запроса сервера вместо одного
  • По первому запросу вам понадобятся некоторые скрипты (enquire.js, скрипт enquire.register, сценарий jquery или templating), которые ничего не делают на странице, только область загрузки содержимого
  • даже если сценарий jquery или templating выполняется быстро, статический html, выводимый с сервера, всегда отображается быстрее

Короче говоря, вы много работаете над оптимизацией сайта для мобильных устройств, имея шанс получить противоположный результат.

Этот рабочий процесс может быть полезен для небольших частей сайта, а не для всего содержимого. По крайней мере не для меня.

Для меня, в таком случае, я бы

  1. для каждого файла шаблона создайте 3 версии, например page.php | page-tablet.php | page-phone.php или header.php | header-tablet.php | header-phone.php и т. д.
  2. В режиме init используйте метод обнаружения сервера, например Mobile Detect, чтобы обнюхать текущее устройство, поместить его в статический класс переменных или в константу
  3. Добавьте крючок для фильтра template_include который добавляет "-{$device}" к каждому требуемому шаблону. (например, если требуется «page.php», он возвращает «page-tablet.php», если текущее устройство представляет собой планшет)
  4. Используя одну и ту же глобальную доступную переменную $device , зарегистрируйте js-скрипты, связанные с устройством
  5. В файле шаблона используйте get_header($device) вместо get_header() как get_footer($device) , get_sidebar($device) . Также используйте get_template_part('part', $device) вместо get_template_part('part') и так далее.

Таким образом, у вас есть

  • один запрос на страницу, а не 2
  • каждое устройство загружает собственный контент
  • Выход html требуется серверу, а не клиенту, и это лучше для производительности

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

Работа с wordpress, на мой взгляд, это лучший способ получить мобильную оптимизированную версию сайта.