Как заставить выполнение скрипта ждать загрузки jquery

изменить

Не могли бы вы попробовать правильный тип для ваших тегов скрипта? Я вижу, вы используете text/Scripts, который не подходит для javascript.

Использовать это:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> 
<script type="text/javascript" src="../Scripts/jquery.dropdownPlain.js"></script>
<script type="text/javascript" src="../Scripts/facebox.js"></script>

конец редактирования

или вы можете взглянуть на require.js, который является загрузчиком вашего кода javascript.

в зависимости от вашего проекта, это может быть немного излишним

Поздно к вечеринке и аналогично вопросу Briguy37, но для справки в будущем я использую следующий метод и передаю функции, которые я хочу отложить до загрузки jQuery:

function defer(method) {
    if (window.jQuery) {
        method();
    } else {
        setTimeout(function() { defer(method) }, 50);
    }
}

Он будет рекурсивно вызывать метод defer каждые 50 мс, пока не будет window.jQuery, когда он завершится и вызовет method()

Пример с анонимной функцией:

defer(function () {
    alert("jQuery is now loaded");
});

вы можете использовать атрибут defer, чтобы загрузить скрипт в самом конце.

<script type='text/javascript' src='myscript.js' defer='defer'></script>

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

Если ваш код находится на странице, а не в отдельном js-файле, вы должны выполнить свой скрипт только после того, как документ будет готов, и инкапсуляция вашего кода, как это, тоже должно работать:

$(function(){
//here goes your code
});

Еще один способ сделать это, хотя метод отсрочки Darbio более гибкий.

(function() {
  var nTimer = setInterval(function() {
    if (window.jQuery) {
      // Do something with jQuery
      clearInterval(nTimer);
    }
  }, 100);
})();

Самый простой и безопасный способ - использовать что-то вроде этого:

var waitForJQuery = setInterval(function () {
    if (typeof $ != 'undefined') {

        // place your code here.

        clearInterval(waitForJQuery);
    }
}, 10);

Вы можете попробовать событие onload. Он возникает, когда все скрипты загружены:

window.onload = function () {
   //jquery ready for use here
}

Но имейте в виду, что вы можете переопределить другие скрипты, в которых используется window.onload.

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

document.addEventListener('DOMContentLoaded', function load() {
    if (!window.jQuery) return setTimeout(load, 50);
    //your synchronous or asynchronous jQuery-related code
}, false);

Это обычная проблема, представьте, что вы используете классный шаблонизатор PHP, поэтому у вас есть базовый макет:

HEADER
BODY ==> dynamic CONTENT/PAGE
FOOTER

И, конечно, вы где-то читали, что лучше загружать Javascript внизу страницы, чтобы ваш динамический контент не знал, кто такой jQuery (или $).

Также вы где-то читали, что полезно встроить небольшой Javascript, поэтому представьте, что вам нужен jQuery на странице, baboom, $ не определен (.. пока ^^).

Мне нравится решение, которое предоставляет Facebook

window.fbAsyncInit = function() { alert('FB is ready !'); }

Итак, как ленивый программист (я бы сказал, хороший программист ^^), вы можете использовать эквивалент (на своей странице):

window.jqReady = function() {}

И добавьте внизу вашего макета после того, как jQuery include

if (window.hasOwnProperty('jqReady')) $(function() {window.jqReady();});

Вместо «ожидания» (что обычно делается с использованием setTimeout) вы также можете использовать определение объекта jQuery в самом окне в качестве ловушки для выполнения вашего кода, который на него полагается. Это достигается с помощью определения свойства, определенного с помощью Object.defineProperty.

(function(){
  var _jQuery;
  Object.defineProperty(window, 'jQuery', {
    get: function() { return _jQuery; },
    set: function($) {
      _jQuery = $;

      // put code or call to function that uses jQuery here

    }
  });
})();

Использовать:

$(document).ready(function() {
    // put all your jQuery goodness in here.
});

Ознакомьтесь с этим для получения дополнительной информации: http://www.learningjquery.com/2006/09/introduction-document-ready

Примечание. Это должно работать, пока импорт сценария для вашей библиотеки JQuery находится выше этого вызова.

Обновление:

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

function yourFunctionToRun(){
    //Your JQuery goodness here
}

function runYourFunctionWhenJQueryIsLoaded() {
    if (window.$){
        //possibly some other JQuery checks to make sure that everything is loaded here

        yourFunctionToRun();
    } else {
        setTimeout(runYourFunctionWhenJQueryIsLoaded, 50);
    }
}

runYourFunctionWhenJQueryIsLoaded();

Я не очень люблю интервальные штучки. Когда я хочу отложить jquery или что-то еще, обычно происходит что-то вроде этого.

Начнем с:

<html>
 <head>
  <script>var $d=[];var $=(n)=>{$d.push(n)}</script>
 </head>

Потом:

 <body>
  <div id="thediv"></div>

  <script>
    $(function(){
       $('#thediv').html('thecode');
    });
  </script>

  <script src="http://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>

И наконец:

  <script>for(var f in $d){$d[f]();}</script>
 </body>
<html>

Или менее ошеломляющая версия:

<script>var def=[];function defer(n){def.push(n)}</script>
<script>
defer(function(){
   $('#thediv').html('thecode');
});
</script>
<script src="http://code.jquery.com/jquery-3.2.1.min.js" type="text/javascript"></script>
<script>for(var f in def){def[f]();}</script>

А в случае async вы можете выполнять push-функции при загрузке jquery.

<script async onload="for(var f in def){def[f]();}" 
src="jquery.min.js" type="text/javascript"></script>

Альтернативно:

function loadscript(src, callback){
  var script = document.createElement('script');
  script.src = src
  script.async = true;
  script.onload = callback;
  document.body.appendChild(script);
};
loadscript("jquery.min", function(){for(var f in def){def[f]();}});

Давайте расширим defer() от Dario, чтобы его можно было использовать повторно.

function defer(toWaitFor, method) {
    if (window[toWaitFor]) {
        method();
    } else {
        setTimeout(function () { defer(toWaitFor, method) }, 50);
    }
}

Что затем запускается:

function waitFor() {
    defer('jQuery', () => {console.log('jq done')});
    defer('utag', () => {console.log('utag done')});
}

Я не думаю, что это твоя проблема. По умолчанию загрузка скрипта выполняется синхронно, поэтому, если вы не используете атрибут defer или не загружаете сам jQuery через другой запрос AJAX, ваша проблема, вероятно, больше похожа на ошибку 404. Можете ли вы показать свою разметку и сообщить нам, если вы заметите что-нибудь подозрительное в firebug или веб-инспекторе?

Проверь это:

https://jsfiddle.net/neohunter/ey2pqt5z/

Он создаст поддельный объект jQuery, который позволяет вам использовать методы onload jquery, и они будут выполнены, как только jquery будет загружен.

Это не идеально.

// This have to be on <HEAD> preferibly inline
var delayed_jquery = [];
jQuery = function() {
  if (typeof arguments[0] == "function") {
    jQuery(document).ready(arguments[0]);
  } else {
    return {
      ready: function(fn) {
        console.log("registering function");
        delayed_jquery.push(fn);
      }
    }
  }
};
$ = jQuery;
var waitForLoad = function() {
  if (typeof jQuery.fn != "undefined") {
    console.log("jquery loaded!!!");
    for (k in delayed_jquery) {
      delayed_jquery[k]();
    }
  } else {
    console.log("jquery not loaded..");
    window.setTimeout(waitForLoad, 500);
  }
};
window.setTimeout(waitForLoad, 500);
// end



// now lets use jQuery (the fake version)
jQuery(document).ready(function() {
  alert('Jquery now exists!');
});

jQuery(function() {
  alert('Jquery now exists, this is using an alternative call');
})

// And lets load the real jquery after 3 seconds..
window.setTimeout(function() {
  var newscript = document.createElement('script');
  newscript.type = 'text/javascript';
  newscript.async = true;
  newscript.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js';
  (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(newscript);
}, 3000);

Косвенное замечание о подходах здесь, которые используют нагрузку setTimeout или setInterval. В этих случаях возможно, что при повторном запуске проверки DOM уже будет загружена, а событие DOMContentLoaded в браузере будет запущено, поэтому вы не сможете надежно обнаружить это событие, используя эти подходы. Я обнаружил, что jQuery ready все еще работает, поэтому вы можете встроить свой обычный

jQuery(document).ready(function ($) { ... }

внутри вашего setTimeout или setInterval, и все должно работать как обычно.