延迟功能，直到$变为可用

问题描述：

由于性能原因，雅虎建议到load scripts at the bottom of an HTML pages。我使用HTML5 Boilerplate，它遵守规则。

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

出现这种情况，例如与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

任何提示posticipate <script>块，直到$符号执行可以在命名空间中找到？

在顶部或中间等待底部加载的内容脚本没有意义 - 将内联脚本移动到您在其中包含jQuery的位置之下。如果我可以大致概括一下，除非它做了一些不能等待页面加载的内容（例如，'document.write（）'），否则不应该在页面中间需要内联脚本。 – nnnnnn 2012-07-31 01:51:29

答

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

答

如果可以，只需将jQuery放置在HEAD中即可。这是可以接受的，因为它是一个非常常见的库。然而，除了明显地移动脚本块以满足jquery脚本的要求之外，你几乎只有一个选择 - 使用window.setTimeout（function（）{... jQuery code ...}，2000）; ......在我看来，上述是一种创可贴......不是最佳做法。

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

我只是不会在第一时间使用setTimeout。我不会依赖那些“完全不可靠”的东西。 – 2012-07-31 01:42:44

同意...但是，有时您没有选择（如果您无权编辑整个代码库，尤其是在大型开发环境中）。同样，它的意思是作为一种创可贴......并且是最后的手段。 – 2012-07-31 18:37:59

答

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

答

您可以创建自己的“准备检查器”。

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

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

     //onload code here 

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

这样，您可以等待文档准备就绪，并且即使它在文档的底部也会加载jQuery。

将“code here”代码放入函数并从底部定义的jQuery'$（document）.ready（）'处理函数调用该函数不是更容易吗？ – nnnnnn 2012-07-31 01:52:50

难道不会抛出“非法令牌$'？如果jQuery尚未加载 – ExceptionLimeCat 2012-07-31 01:55:46

哦，我明白了。在下面或者在同一个脚本标记中有你的jQuery引用。是的，这可能会更容易。 – ExceptionLimeCat 2012-07-31 01:57:38

延迟功能，直到$变为可用

相关推荐