延迟函数直到 $ 可用答案

【问题标题】：Delay a function until $ becomes available延迟函数直到 $ 可用
【发布时间】：2012-07-28 17:43:39
【问题描述】：

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

这种方法的问题是 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> 块的执行？

【问题讨论】：

没有必要在顶部或中间放置内联脚本来等待底部的内容加载 - 将内联脚本移动到包含 jQuery 的位置下方。如果我可以进行全面概括，那么您不需要页面中间的内联脚本，除非它执行的操作无法等待页面加载（例如，document.write()）。

标签： javascript jquery namespaces deferred-execution

【解决方案1】：

您可以创建自己的“Ready checker”。

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

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

         //onload code here

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

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

【讨论】：

将“这里的代码”代码放在一个函数中并从底部定义的 jQuery $(document).ready() 处理程序中调用该函数不是更容易吗？
不会抛出illegal token $ 吗？如果 jQuery 还没有加载
哦，我明白了。在您拥有 jQuery 参考的下方或同一脚本标记中进行调用。是的，那可能会更容易。
我知道 jQuery 可能很慢。这种方法“更快”还是 jQuery 会更快？
是的，我明白了。我只是问你的意见。

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

我一开始就不会使用 setTimeout。我不会依赖“完全不可靠”的东西。
同意...但是，有时您别无选择（如果您无权编辑整个代码库，尤其是在大型开发环境中）。同样，它是一种创可贴……也是最后的手段。

【解决方案4】：

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

【讨论】：