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

Я использую код Google, чтобы отложить загрузку JavaScript ( страницы Google)

Но у меня есть несколько встроенных сценариев JavaScript, таких как:

<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>
Источник

5 ответов

Вы не можете использовать 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();
    });
});

демонстрация

Источник

Поскольку вы откладываете загрузку 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);
Источник

Если вы собираетесь реализовать асинхронную загрузку Javascripts, то было бы лучше не использовать встроенный 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>
Источник

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

в заголовке

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

после тега 

<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);
Источник

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

<script>
$(document).ready(function(){
$("p").click(function(){
alert("please work");
});
});
</script>
Источник
Другие вопросы по тегам