Отложить загрузку JavaScript — Uncaught ReferenceError: $ не определен

Я использую код Google для отсрочки загрузки javascript (страниц Google )

Но у меня есть некоторые встроенные javascripts, такие как:

<script type="text/javascript">
$(function () {
    alert("please work");
});
</script>

И это дает мне:

Uncaught ReferenceError: $ не определен

Я думаю, мне нужна какая-то функция, которая срабатывает после загрузки jQuery и запускает мои встроенные javascripts. Но если есть другой способ, буду рад.

РЕДАКТИРОВАТЬ:

Некоторые из вас совершенно не в теме. Махеш Сапкал был близок.

С этим кодом у меня нет ошибки, но все равно не работает

<head>
    <script type="text/javascript">
        var MhInit = NULL;

        // Add a script element as a child of the body
        function downloadJSAtOnload() {
            var element = document.createElement("script");
            MhInit = element.src = "my_packed_scripts.js";
            document.body.appendChild(element);
        }

        // Check for browser support of event handling capability
         if (window.addEventListener)
            window.addEventListener("load", downloadJSAtOnload, false);
         else if (window.attachEvent)
             window.attachEvent("onload", downloadJSAtOnload);
         else window.onload = downloadJSAtOnload;
    </script>

</head>
<body>
    <script type="text/javascript">
        MhInit.onload = function() {
            console.debug("here");
        };
    </script>
</body>

javascript jquery asynchronous-javascript deferred-loading
person Manic Depression    schedule 09.01.2014    source источник
comment
используйте jQuery.noConflict();   -  person Bhojendra Rauniyar    schedule 09.01.2014

Ответы (5)


arrow_upward
5
arrow_downward

Вы не можете использовать jQuery до его загрузки. Если вы переместите <script src="jquery.js" /> внизу страницы, вы также должны переместить все строки, в которых используется $(...), под ним.

Существует хитрое решение, которое выглядит примерно так:

1) Определение нескольких переменных в верхней части страницы:

var _jqq = [];
var $ = function(fn) {
    _jqq.push(fn);
};

2) В середине страницы можно написать:

$(function() {
    alert("document ready callback #1");
});
$(function() {
    alert("document ready callback #2");
});

3) Внизу вашей страницы включите jQuery:

<script src="//code.jquery.com/jquery.min.js"></script>

4) И наконец:

$(function() {
    $.each(_jqq, function(i, fn) {
        fn();
    });
});

Демо

person Salman A    schedule 09.01.2014
comment
это выглядит довольно круто и просто, я все еще тестирую его, скоро обновлю - person Lee Gary; 05.09.2014

arrow_upward
2
arrow_downward

Поскольку вы откладываете загрузку jquery, ваш встроенный javascript должен вызываться только после завершения загрузки jquery. Используйте следующий код, чтобы проверить, загружена ли библиотека.

var scriptElem = document.createElement("script");

scriptElem.onload = function() {
    alert('please work');
};

scriptElem.src = "http://code.jquery.com/jquery-1.10.1.min.js";

document.getElementsByTagName("head")[0].appendChild(scriptElem);
person Mahesh Sapkal    schedule 09.01.2014

arrow_upward
2
arrow_downward

Если вы собираетесь реализовать асинхронную загрузку Javascript, лучше не использовать встроенный Javascript, который зависит от асинхронно загружаемого файла.

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

Однако, если вы хотите найти более простое решение, я бы предложил разместить ваши JS-библиотеки в конце DOM и привязать все зависимости к обработчику onload.

Что-то вроде этого

<body>
    <!-- Body content -->
    <script>document.onload = function() { //use jQuery here }</script>
</body>
<script src="/path/to/jQuery/"></script>
person Achrome    schedule 09.01.2014
comment
пробовал это безрезультатно. должно ли это работать для отложенного jQuery? - person Pmpr; 11.05.2017
comment
Что вы подразумеваете под отложенным jQuery? - person Achrome; 16.05.2017

arrow_upward
0
arrow_downward

когда я хочу отложить загрузку jquery, я использую так:

в заголовке

<script> var callBackSomething = [];</script>

после тега ‹ /body>

<script defer src="//code.jquery.com/jquery.min.js"></script>
<script defer src="main.js"></script>

в main.js

if (typeof callBackSomething !== 'undefined' && $.isArray(callBackSomething )){
    $.each(callBackSomething , function (k, v) {
        if($.isFunction(v))
            v();
    });
}

и на странице

let js_callback = function () {
// code jquery in here
};
callBackSomething.push(js_callback);
person Hung Pham    schedule 27.07.2018

arrow_upward
-3
arrow_downward

попробуйте это http://w3schools.com/jquery/default.asp. вы можете легко это сделать. 

<script>
$(document).ready(function(){
$("p").click(function(){
alert("please work");
});
});
</script>
person vikas agrahari    schedule 09.01.2014
comment
$ не определено. Вы не можете вызвать $ для отсрочки загрузки JS, пока $ не будет доступно. - person Quentin; 09.01.2014