Загрузите jQuery Mobile script асинхронно?

Кто-нибудь пытался выполнить загрузку jQuery Mobile с помощью сопровождающих скриптов асинхронно с помощью head.js или с помощью другого метода? Я экспериментирую с этим прямо сейчас, и хотя он дает огромный прирост производительности, он, похоже, нарушает навигацию (в частности, hashchanged event handling). Поэтому я задаюсь вопросом, может ли кто-нибудь поделиться своим опытом с ним.

UPDATE: проблема с событием hashchanged оказалась вызвана другим компонентом. Таким образом, реализуйте асинхронную загрузку jQM и других ваших ресурсов JavaScript, это безопасно и чрезвычайно увеличивает время загрузки и производительность вашего JS-приложения. Я использую head.js для этого, вы можете использовать все, что лучше всего подходит вам.

Ответы

Ответ 1

Это именно то, для чего нужен пакет RequireJS. Использование загрузчика модуля, такого как RequireJS, позволяет асинхронно загружать несколько JS файлов и определять обратные вызовы для загрузки файлов.

Вот простой пример...

Вместо того, чтобы загружать jQuery и/или другие JS файлы, единственным загружаемым <script> является RequireJS script.

<script data-main="js/app" src="js/require.js"></script>

Атрибут data-main сообщает RequireJS загружать файл в /js/app.js, который содержит ваши настройки конфигурации RequireJS. Вот пример /js/app.js:

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app",
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
      "jqueryMobile": "//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.5/jquery.mobile.min"
    }
});

// Load the main app module to start the app
requirejs(["app/main"]);

В этом случае /js/app.js используется в основном для настройки путей. Свойство app указывает RequireJS, где искать конкретное приложение JS, а свойство jquery указывает RequireJS путь к URL-адресу Google CDN для jQuery. Наконец, используйте метод requirejs() для загрузки ваших приложений .js. Обратите внимание, что все пути не работают .js.

В этот момент RequireJS будет искать ваш app JS в app/main.js. Создайте файл в /js/app/ с именем main.js - так что теперь у вас есть файл /js/app/main.js.

Этот файл будет загружать файлы jQuery и jQuery Mobile из CDN Google, асинхронно, и содержать остальную часть вашей логики приложения. Вот пример /js/app/main.js:

define(["jquery", "jqueryMobile"], function($) {
    //jQuery and jQuery Mobile have been loaded.
    $(function() {
        // Do stuff with jQuery and jQuery Mobile
    });
});

Какое влияние это имеет? Посмотрите на сетевой водопад, чтобы посмотреть, как загружаются файлы:

На приведенной выше диаграмме асинхронно отображаются как jQuery, так и jQuery Mobile.

Для аналогичной демонстрации см. Пример jQuery RequireJS.

Ответ 2

использовать атрибут Async при загрузке java script на страницу. но это будет поддерживать только в Современном браузере (Html5) для получения подробной информации. См. эту ссылку.

http://www.w3schools.com/tags/att_script_async.asp

Ответ 3

Я думаю, вы можете использовать:

var script = document.createElement('script');
script.onload = function() {
  alert("Script loaded and ready");
};

script.src = "http://whatever.com/the/script.js";
document.getElementsByTagName('head')[0].appendChild(script);

Он может быть запущен, но событие, которое вы хотите.

Найти здесь: document.createElement( "script" ) синхронно