Javascript включает в себя не загрузку позже на странице

Ответ 1

Мы по-прежнему видим эту ошибку несколько раз в день и не получили окончательного ответа на то, что вызывает ее. Мое лучшее предположение заключается в том, что либо предыдущие сценарии тайм-аут загрузки, либо пользователь быстро перемещается между ссылками, что предотвращает загрузку страницы полностью. Они также могут просто использовать кнопку "Назад", вызывающую странное поведение в сценариях на странице.

Ответ 2

Это может произойти, если вы не дождитесь загрузки script, который определяет analytics, или если вы не определяете порядок загрузки файлов javascript. Убедитесь, что script, который определяет analytics, всегда загружается, прежде чем пытаться вызвать его метод track. В зависимости от вашей установки скрипты могут загружаться в случайном порядке, что приводит к непредсказуемому поведению.

Вы пытались убедиться, что все загружено, но слушатель $(document).ready(function () {}); просто гарантирует, что DOM готов, а не доступна аналитика. И здесь у вас такая же проблема. $ - это просто jQuery, поэтому $ is not defined означает, что jQuery еще не загружен. Вероятно, ваш script появился до загрузки jQuery и попытался вызвать то, что еще не определено.

Ответ 3

Основа вашей проблемы, вероятно, заключается в вашем предположении:

все должно быть загружено синхронно

Все решительно не загружается синхронно. Протокол HTTP 1.1 поддерживает piplining и из-за закодированное кодирование передачи ваши объекты, на которые ссылаются, могут или не могут выполнить загрузку до того, как ваша основная веб-страница завершит загрузку.

Все это происходит асинхронно, и вы не можете гарантировать порядок их загрузки. Вот почему браузеры делают несколько параллельных подключений к вашему веб-серверу при загрузке одной веб-страницы. Поскольку javascript и jQuery управляются событиями, они по своей природе асинхронны которые могут запутаться, если вы не хорошо понимаете это поведение.

Сочетание вашей проблемы заключается в том, что документ загружает JavaScript-событие (помните, jQuery только расширяет JavaScript) вызывается, когда DOM готов, который может быть до изображений и другого внешнего содержимого. И да, этот внешний контент может включать вашу ссылку на jquery.js script. Если это загрузится после DOM, вы увидите ошибку" $не определена". Поскольку связанный script еще не загружен, селектор jQuery undefined. Аналогично, с вашими другими связанными библиотеками.

Попробуйте вместо этого использовать $(window).load(). Это должно работать, когда все ссылочные объекты и загружены DOM.

Ответ 4

Поскольку сценарии имеют тенденцию загружать произвольные заказы, вы можете заставить свою аналитику script загрузить после того, как все будет готово.

Существуют различные подходы к этой задаче.

Скалы HTML5 дали довольно хороший фрагмент для такого рода вещей. Кроме того, в зависимости от ваших потребностей вы можете использовать загрузчик модуля, например require.js. Использование загрузки promises и Require.js довольно сладкое тоже. Как правило, вы используете много JavaScript, загрузчик модулей поможет вам в этом беспорядке.

Я сохранил самый уродливый и наименее эффективный, еще один надежный подход к концу. Ожидание загрузки внешней библиотеки может создавать огромные узкие места, и их следует рассматривать и тщательно обрабатывать. Вывод аналитики script составляет async и очень сложно обрабатывать. В этих случаях я предпочитаю

Загрузка внешних отложенных сценариев как-то просто:

function loadExtScript(src, test, callback) {
  var s = document.createElement('script');
  s.src = src;
  document.body.appendChild(s);

  var callbackTimer = setInterval(function() {
    var call = false;
    try {
      call = test.call();
    } catch (e) {}

    if (call) {
      clearInterval(callbackTimer);
      callback.call();
    }
  }, 100);
}

Взгляните на этот пример, когда я загружаю jQuery динамически с помощью функции обещания при загрузке script: http://jsfiddle.net/4mtyu/487/

Вот демонстрационная загрузка цепочки Angular и jQuery в порядке: http://jsfiddle.net/4mtyu/488/

Учитывая приведенный выше пример, вы можете загрузить свою аналитику как:

loadExtScript('https://code.jquery.com/jquery-2.1.4.js', function () {
    return (typeof jQuery == 'function');
}, jQueryLoaded);

function jQueryLoaded() {
    loadExtScript('https://analytics-lib.com/script.js', function () {
        return (typeof jQuery == 'function');
    }, analyticsLoadedToo);
}

function analyticsLoadedToo() {
    //cool we are up and running
    console.log("ready");
}

Ответ 5

Этот код загрузит каждый URL script, помещенный в libs в точном порядке, ожидая полной загрузки до добавления следующего. Он не так оптимизирован, как позволяет браузеру делать это, но позволяет отслеживать ошибки и принудительно выполнять порядок загрузки.

(function(){
    var libs = [
        "http://example.com/jquery.js",
        "http://example.com/tracker.js",
        "http://example.com/myscript.js"
    ];
    var handle_error = function() {
        console.log("unable to load:", this.src);
    };
    var load_next_lib = function() {
        if(libs.length) {
            var script = document.createElement("script");
            script.type = "text/javascript";
            script.src = libs.shift();
            script.addEventListener("load", load_next_lib);
            script.addEventListener("error", handle_error);
            document.body.appendChild(script);
        }
    };
    load_next_lib();
})();

Но я бы посоветовал вам проверить каждый тег <script> вашего сайта и посмотреть, есть ли у них атрибут defer="" или async="". Большинство проблем исходят из них, потому что они говорят браузеру выполнить script позже. Они также могут быть в неправильном порядке.

Ответ 6

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

(function runAnalytics () {
  if (typeof analytics === 'undefined') {
    return setTimeout(runAnalytics, 100);
  }
  analytics.track('on that awesome page');
}());

... то же самое можно использовать и для других библиотек, надеюсь, вы увидите шаблон:

(function runJQuery () {
  if (typeof $ === 'undefined') {
    return setTimeout(runJQuery, 100);
  }
  $(document).ready(...);
}());

Изменить: Как отмечалось в комментариях, события load лучше подходят для этого. Проблема в том, что эти события могут быть уже запущены к моменту выполнения script, и вам придется написать резервный код для этих сценариев. Чтобы не писать 10 строк кода для выполнения 1 строки, я предложил простой, неинвазивный, быстрый и грязный, обязательно работая над каждым решением опроса браузера. Но чтобы не получить больше downvotes, здесь более правильное утомительное и сложное решение, если у вас есть говядина с опросом:

<script>
// you can reuse this function
function waitForScript (src, callback) {
  var scripts = document.getElementsByTagName('script');
  for(var i = 0, l = scripts.length; i < l; i++) {
    if (scripts[i].src.indexOf(src) > -1) {
      break;
    }
  }
  if (i < l) {
    scripts[i].onload = callback;
  }
}

function runAnalytics () {
  analytics.track('on that awesome page');
}

if (typeof analytics === 'undefined') {
  waitForScript('analytics.js', runAnalytics);
} else {
  runAnalytics();
}

function runJQuery () {
  $(document).ready(...);
}

if (typeof $ === 'undefined') {
  waitForScript('jquery.min.js', runJQuery);
} else {
  runJQuery();
}
</script>

Ответ 7

У этого есть классное решение. Правильно загрузите js для вашего приложения. Здесь, сначала загружаю jQuery, а затем загружаю analytics.js. Надеюсь, это решит вашу проблему для поддерживаемых html5 браузеров. Код:

    var fileList =[
                    'your_file_path/jQuery.js',
                    'your_file_path/analytics.js'
                  ];

    fileList.forEach(function(src) {
    var script = document.createElement('script');
    script.src = src;
    script.async = false;
    document.head.appendChild(script);
 });

Этот фрагмент кода сначала загрузит jQuery, а затем загрузит файл analytics.js. Надеюсь, это решит вашу проблему.