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

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

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

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

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

Неподготовлено ReferenceError: $не определено

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

EDIT:

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

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

<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>

Ответы

Ответ 1

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

Демо

Ответ 2

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

Ответ 3

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

Ответ 4

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

<script>
$(document).ready(function(){
$("p").click(function(){
alert("please work");
});
});
</script>