2012-03-14 7 views
13

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

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

+0

Вы пытаетесь что-то вроде [что] (https://gist.github.com/1231586)? – neoascetic

+1

Нет, я этого не делал. Однако последние версии jQM действительно поддерживают Require.Js. –

ответ

0

использовать атрибут Async при загрузке java-скрипта на страницу. но это будет поддерживать только в современном браузере (html5) для получения более подробной Пожалуйста, смотрите эту ссылку

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

+0

Мне нужно загрузить несколько скриптов в определенном порядке. head.js позволяет мне контролировать порядок загрузки, а атрибут async - нет. –

+0

Жаль, что я не мог сопротивляться. Пожалуйста, лучше обучите себя w3schools и ущерб, который они наносят: http://w3fools.com/ – kodeart

1

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

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

Вместо того чтобы загружать ваши JQuery, и/или другие файлы JS, только <script> загрузить это скрипт RequireJS.

<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 
    }); 
}); 

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

enter image description here

Диаграмма выше показывает, как JQuery и JQuery Mobile загрузки асинхронно.

Для аналогичного примера см. RequireJS jQuery example.

0

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

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") synchronously

Смежные вопросы