jQuery + head.js: Как вручную вызвать $(document).ready() изнутри готового обратного вызова head.js?

Мне нужно оптимизировать время загрузки веб-приложения, которое содержит множество файлов JavaScript, включенных в каждую из его HTML-страниц. Я хочу попробовать head.js на одной из таких страниц, чтобы увидеть, улучшает ли это время загрузки. Есть много $(document).ready(callback) обратные вызовы в тех файлах JS, которые вызываются при загрузке DOM, когда head.js все еще загружает оставшиеся файлы JS.

Есть ли способ, которым я мог бы сказать JQuery не запускать ready событие само по себе, позвольте мне вызвать его изнутри готового обратного вызова head.js?

Источник

3 ответа

Я не уверен, почему вы захотите вызвать событие готовности документа вручную.

Вместо этого, подписывайтесь и публикуйте свои собственные события, используя встроенные в jQuery trigger & bind функциональность. Это лучшая практика и оптимальное решение.

Рабочая JSFiddle Демо

Источник

Создать функцию зарегистрировать ее в документе готово

$(document).ready(readyFunc);

readyFunction(){
   /// something to do;
}

если вы хотите использовать их вручную, просто нужно вызвать readyFunction();

Источник

Я провел небольшой эксперимент. Что-то вроде:

<html> 
<head>
<script src="head.js"></script>
<script src="jquery.min.js"></script>
</head>
<body>
<script type="text/javascript">
jQuery("document").ready(function() {
    console.log("ready.document");
});
</script>
...
<script type="text/javascript">
head.js("a.js", "b.js", "c.js", "test.js", function() {
        console.log("init.scripts");
        var millis = 2000;
        var date = new Date();
        var curDate = null;

        do {curDate = new Date(); } 
            while(curDate-date < millis);
        jQuery("#ddd").text(testTT);
        console.log("init.end");

});

</script>
... a lot of html content ...
<div id="ddd"></div>
...
<script type="text/javascript" >
console.log("last line");
</script>
</body>

Test.js пишет в консоль и определяет testTT. Результат следующий

last line
init.testTT
init.scripts
init.end
ready.document

Таким образом, в этом простом случае (с использованием jQuery 1.8) сначала выполняется код в загруженном *.js, затем генерируется head.js по событию init, и, наконец, генерируется событие готовности jQuery. Поэтому следует подождать, пока JQuery не сгенерирует готовое событие. Однако, если это все еще проблема, вы можете сделать следующее.

head.js("a.js", "b.js", "c.js", function() { 
 jQuery("document").ready(function() {
      jQuery("body").trigger("your_event");
 });
});

и вместо того, чтобы слушать jQuery("document").ready... в вашем *.js начните слушать пользовательское событие, которое вы запускаете jQuery("body").on("your_event", handler),

Источник
Другие вопросы по тегам