将函数延迟到$可用

Delay a function until $ becomes available

本文关键字：可用 迟到 延迟 函数      更新时间：2024-05-30

Yahoo出于性能原因，建议在HTML页面的底部加载脚本。我使用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>块，直到在命名空间中找到$符号？

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

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

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

 <script>
    var id = window.setInterval(function(){
         if(document.readyState != 'complete') return;
         //onload code here
         window.clearInterval(id);
    }, 10); 
 </script>

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

如果可以，只需将jQuery放在HEAD中即可。这是可以接受的，因为它是一个非常常见的库。然而，除了明显地将脚本块移动到jquery脚本include之后之外，您几乎有一个选项——使用window.setTimeout（function（）｛…jquery code…｝，2000）。。。在我看来，前面提到的是创可贴。。。不是最佳做法。

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

相关文章：