document.ready当jQuery在body标签之前

时间:2013-07-19 19:34:41

标签: javascript jquery

<html>
    <head>
        <title>Hello</title>
    </head>
    <body>
        <h1>Welcome</h1>


        <script>
            $(function() {
                // $ is undefined
            });
        </script>
        <script src="js/jquery.js"></script>
    </body>
</html>

有没有办法在执行函数之前等待文档加载和加载jQuery?

4 个答案:

答案 0 :(得分:5)

没有

您在$存在之前引用它,这根本不起作用。

假设js/jquery.js存在,这将起作用:

<script src="js/jquery.js"></script>
<script>
        $(function() {
            // your code goes here
        });
</script>

由于第一个脚本标记将在第二个脚本引用之前定义$

无需等待文件准备

Hattip向@KevinB指出了这个显而易见的附加点。

如果脚本标记在头部 - 加载脚本时主体不存在。出于这个原因,在运行javascript之前,通常使用文档来确保html页面存在。

如果脚本标签位于页面底部,则加载脚本时html已存在,因此无需等待文档就绪事件。因此,js代码变为:

<script src="js/jquery.js"></script>
<script>
         // your code goes here
</script>
</body>
</html>

答案 1 :(得分:1)

我觉得这不是一个好的解决方案,但是如果你真的需要,你可以加载jQuery,类似于谷歌为他们的分析服务加载他们的JavaScript。之后您可以编写更多代码来检测何时完成加载并执行包含您想要执行的操作的回调。

从此网站http://www.tlswebsolutions.com/how-to-include-jquery-dynamically-aka-check-to-see-if-it-exists/

采取并修改了粗略演示
if(!(window.jQuery)) {
    var s = document.createElement('script');
    s.setAttribute('src', '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js');
    s.setAttribute('type', 'text/javascript');
    document.getElementsByTagName('head')[0].appendChild(s);
}

答案 2 :(得分:0)

对你来说很简单 -

<html>
<head>
    <title>Hello</title>
</head>
<body>
    <h1>Welcome</h1>

    <script src="js/jquery.js"></script>

    <script>
        $(function() {
            // $ is undefined
        });
    </script>
</body>

答案 3 :(得分:0)

从技术上讲,你可以。

function main() {
  if (! window.jQuery) {
    setTimeout(main, 100);
    return;
  }
  // Some code that uses jQuery
}

setTimeout(main, 100);

这似乎也有可能,但对于旧浏览器可能无法正常工作。

window.onload = function() {
  // Some code that uses jQuery
};