Событие браузера, когда все файлы JS загружены - PullRequest
Новая
       2

Событие браузера, когда все файлы JS загружены

1 голос
/ 11 февраля 2012

Мое приложение AJAX - это, по сути, один index.html плюс несколько модулей .js.Моя установочная функция подключает код обработчика js к соответствующему элементу DOM.Я подозреваю, что мне нужно использовать window.onload (), а не jquery $ (document) .ready (), так как все файлы .js должны быть доступны (то есть загружены) во время подключения.только $ DOM готова к $ (document) .ready (), но нет гарантии, что файлы .js были загружены.Это правильно?

PS.Мне не нужно несколько обработчиков загрузки;мне подходит только одно window.onload ().

Ответы [ 4 ]

3 голосов
/ 11 февраля 2012

У вас определенно есть недоразумение в этом случае. Основная причина, по которой считается целесообразным включать теги сценария непосредственно перед закрытием тега body, заключается в том, что загрузки сценариев блокируют загрузки. Если не указано иное (например, Google Analytics), файлы JavaScript загружаются синхронно.

Тем не менее, если есть зависимости между файлами скриптов, порядок загрузки файлов может быть важным.

1 голос
/ 11 февраля 2012

I настройка двух файлов в качестве теста:

syncscript.html 

<html>
<head>
<title></title>
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function(){
    $(document.body).append('<p>window.load has run.');
});
$(document).ready(function(){
    $(document.body).append('<p>document.ready has run.');
});
</script>
</head>
<body>
<p>Page has loaded. Now continuing page load and attempting to load additional script file (after 10 second pause).</p>
<script type="text/javascript">
var p = document.createElement('p');
p.innerHTML = '<p>Inline script preceding jssleep.php file has run.</p>';
document.body.appendChild(p);
</script>
<script type="text/javascript" src="http://jfcoder.com/test/jssleep.php"></script>
<script type="text/javascript">
var p = document.createElement('p');
p.innerHTML = '<p>This is an inline script that runs after the jssleep.php script file has loaded/run.</p>';
document.body.appendChild(p);
</script>
</body>
</html>

jssleep.php 

<?php

header("content-type: text/javascript");

sleep(10);

?>
var p = document.createElement('p');
p.innerHTML = '<p>jssleep.php script file has loaded and run following &lt;?php sleep(10); ?>.</p>';
document.body.appendChild(p);

Эти выходные данные (в Firefox):

Страница начала загрузку.Теперь продолжаем загрузку страницы и пытаемся загрузить дополнительный файл сценария (после 10-секундной паузы).

Выполнен встроенный сценарий, предшествующий файлу jssleep.php.

Файл сценария jssleep.php загружен и выполняется следующим образом.

Это встроенный сценарий, который запускается после загрузки / запуска файла сценария jssleep.php.

$ (document) .ready () запущен.

$(окно) .load () запущен.

1 голос
/ 11 февраля 2012

Нет, вы можете безопасно использовать $(document).ready(), пока ваши теги скрипта загружаются синхронно (в большинстве случаев это означает "нормально"). Браузер ожидает загрузки <script>, прежде чем продолжить. Следовательно, $(document).ready() включает все теги <script> в источнике.

Существует два исключения из этого, если теги скрипта содержат атрибут async или defer. Первоначальное значение означало, что совместимые браузеры могут продолжать рендеринг страницы, а последнее означает, что сценарий выполняется после завершения страницы.

0 голосов
/ 11 февраля 2012

Это правильно.Однако window.onload также требует загрузки CSS и изображений, поэтому может быть немного излишним.

Что вы можете сделать, это: 

var scriptsToLoad = 0;
// for each script:
s = document.createElement('script');
s.type = "text/javascript";
s.src = "path/to/file.js";
scriptsToLoad += 1;
s.onload = function() {scriptsToLoad -= 1;};
// after all scripts are added in the code:
var timer = setInterval(function() {
    if( scriptsToLoad == 0) {
        clearInterval(timer);
        // do stuff here
    }
},25);
...