1

出于性能原因，雅虎建议在 HTML 页面的底部加载脚本。我使用符合规则的 HTML5 样板。

这种方法的问题是 jQuery 也在底部加载。如果由于某种原因我需要编写包含 jQuery 代码的内联 javascript，我不能，因为$在命名空间中尚不可用。

例如，galeria.js（jQuery 图像库引擎）会发生这种情况，它需要以下标记：

<div id="gallery">
    <img src="/media/img1.png" />
    <img src="/media/img2.png" />
</div>

<script>
$('#gallery').css('height', '200px'); // this is required for galleria to work
Galleria.run('#gallery');
</script>

设置高度的代码#gallery不起作用，因为稍后会加载 jQuery。Firebug 控制台提供：

ReferenceError: $ is not defined

在命名空间中找到符号之前是否有任何暗示执行<script>块的提示？$

4

4 回答 4

5

将您的 jQuery<script>标记留在底部，然后将 Galleria 移动到其<script>下方。

<script type="text/javascript" src="jquery.js"></script>
<script>
$('#gallery').css('height', '200px'); // this is required for galleria to work
Galleria.run('#gallery');
</script>
于 2012-07-31T01:40:07.197 回答
1

您可以将脚本包装在函数中，并在加载 jQuery 后运行的脚本中调用它们。

于 2012-07-31T01:36:22.037 回答
1

您可以创建自己的“就绪检查器”。

 <script>
    var id = window.setInterval(function(){

         if(document.readyState != 'complete') return;

         //onload code here

         window.clearInterval(id);
    }, 10); 
 </script>

这样，您可以等到文档准备好并加载 jQuery，即使它位于文档的底部。

于 2012-07-31T01:49:18.977 回答
0

如果可以，只需将 jQuery 放在 HEAD 中。这是可以接受的，因为它是一个非常常见的库。但是，除了将脚本块明显移动到包含 jquery 脚本之后之外，您几乎还有一个选择——使用 window.setTimeout(function(){ ... jQuery code ... }, 2000); ...在我看来，上述内容是一种创可贴...不是最佳实践。

请注意：这是完全不可靠的，因为我们“猜测”用户将在两秒内加载 jQuery……当然，您可以延长超时时间。但是，用户的速度（/年龄）和带宽都会影响时间。这是不可预测的。

于 2012-07-31T01:39:15.937 回答