почему не загружается jQuery? - PullRequest
0 голосов
/ 08 июля 2010

При использовании функции типа importjs () (пример приведен ниже), jQuery, похоже, не загружается до кода, следующего за ним.

Вот пример HTML-файла:

<html>
  <head></head>
  <body>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
    <script type="text/javascript">
      function importjs(jsFile) {
        var body = document.getElementsByTagName('head').item(0);
        var scpt = document.createElement('script');
        scpt.src = jsFile;
        scpt.type = 'text/javascript';
        body.appendChild(scpt);
      }
      var f1="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js";
      //importjs(f1);
      var $j=jQuery;
      alert("hello stackoverflow!");
    </script>
  </body>
</html>

С приведенным выше кодом предупреждение должно успешно сработать.

Затем закомментируйте первый блок скрипта, то есть тот, который явно загружает jQuery, и раскомментируйте строку importjs (f1) во втором блоке скрипта. На этот раз предупреждение не срабатывает, по крайней мере, в Firefox и Safari.

Теперь добавьте дополнительное предупреждение перед строкой "var $ j = jQuery". Для меня это работает в обоих браузерах, независимо от того, как долго или коротко я жду. SetTimeout, вероятно, также поможет, но это не идеальный способ запрограммировать что-то подобное.

Если javascript однопоточный, почему importjs не работает? Это потому, что новый элемент, созданный importjs, не исполняется до тех пор, пока не завершится первый блок, или новый элемент должен быть выполнен сразу после его создания?

1 Ответ

7 голосов
/ 08 июля 2010

Здесь есть несколько проблем:

  • у вас есть дубликат jQuery, один в html, один в js
  • динамически добавленный JavaScript не будет доступен сразу если вы загружаете сценарии таким образом, зависимый код должен быть в функции обратного вызова

    function importjs(jsFile, callback) {
        var head = document.getElementsByTagName('head')[0];
        var script = document.createElement('script');
        script.src = jsFile;
        script.type = 'text/javascript';
        script.onload = script.onreadystatechange = function() {
          // execute callback
          if (callback) callback();
          // prevent memory leak in IE
          script.onload = null;
          head.removeChild(script);
        };
        head.appendChild(script);
    }
    

    тогда вы должны использовать его как:

    importjs("jquery.js", function(){
        // all jQuery dependant code
        // goes here...
    });​
    

UPDATE

Существует более надежное решение для включения файлов javascript, которое позволяет:

  • включает несколько файлов, связанных
  • убедитесь, что они выполнены в порядке
  • загружать их неблокирующим способом (параллельно с другими ресурсами)

Я все еще работаю над этим сценарием , но в значительной степени работает сейчас. Не забудьте проверить это.

Он сочетает в себе преимущества различных методов, что дает огромное преимущество во время загрузки страницы. Вот статья по теме: Загрузка скриптов без блокировки

Синтаксис:

include(['jquery.js','jquery-ui.js'], myjQueryCode); // executed in order
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...