Question

雅虎建议load scripts at the bottom of an HTML pages出于性能原因。我使用符合规则的HTML5 Boilerplate。

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

这种情况发生在galleria.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>符号后，是否有任何提示$阻止执行的提示？

Answer 1

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

Answer 2

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

Answer 3

你可以创建自己的'Ready checker'。

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

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

         //onload code here

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

通过这种方式，您可以等到文档准备就绪并加载jQuery，即使它位于文档的底部。

Answer 4

如果可以，只需将jQuery放在HEAD中即可。这是可以接受的，因为它是一个非常常见的库。但是，除了在jquery脚本包含之后明显移动脚本块之外，你几乎有一个选项 - 使用window.setTimeout（function（）{... jQuery code ...}，2000）; ......在我看来，前面提到的是创可贴......而不是最佳实践。

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

延迟功能直到$可用

4 个答案: