JavaScript – 如何确保加载jQuery?

我有一个网页。 加载此网页时,我想执行一些JavaScript。 这个JavaScript使用JQuery。 但是,似乎在加载页面时,jQuery库尚未完全加载。 因此,我的JavaScript无法正常执行。

在执行JavaScript之前,确保加载jQuery库有哪些最佳实践?

jQuery库应该包含在页面的部分中:

  

你自己的代码应该在此之后。 JavaScript是线性和同步加载的,因此只要按顺序包含脚本,就不必担心它。

要在DOM完成加载时执行代码(因为在发生这种情况之前你不能真正使用大量的jQuery库),请执行以下操作:

 $(function () { // Do stuff to the DOM $('body').append('

Hello World!

'); });

如果你正在混合JavaScript框架并且它们互相干扰,你可能需要像这样使用jQuery:

 jQuery(function ($) { // First argument is the jQuery object // Do stuff to the DOM $('body').append('

Hello World!

'); });

已经有几个答案,每个答案都很好但是所有答案都依赖于确保在任何依赖项尝试使用它之前同步下载jQuery。 这种方法非常安全,但在下载和解析jQuery库脚本时,也无法下载/运行其他资源,效率低下。 如果你使用嵌入式标记将jQuery放在头部,那么用户浏览器在下载和处理jQuery时将处于空闲状态,因为它可以执行其他操作,例如下载图像,下载其他脚本等。

如果您正在寻找启动时的快速响应,那么每毫秒都很重要。

在过去一年左右的时间里,史蒂夫·索德斯(Steve Souders)首先在雅虎工作,现在在谷歌工作。 如果您有时间,请查看他的幻灯片,以获取更快的网站和高性能网站 。 优秀。 有一个重要的释义,继续在这里。

将javascript文件附加到DOM时,发现在文档的中放入一个内联

  

这确保了jQuery在下载和解析时不会阻止下载和解析任何其他图像或javascript文件。 但是如果你有一个依赖于jQuery的脚本在jQuery之前完成下载,这可能会出现问题。 jQuery不会出现,你会得到一个错误,说$或jQuery是未定义的。

因此,为了确保您的代码能够运行,您必须进行一些依赖性检查。 如果不满足您的依赖关系,请稍等片刻再试一次。

  

就像我之前说过的那样,之前显示的方法没有任何问题,它们都是有效的,并且都有效。 但是这种方法可以确保您在等待jQuery时不会阻止页面上其他项的下载。

此方法适用于任何文件,因此如果必须包含10个js文件,则可以使用此方法附加每个文件。 您只需确保检查function在运行之前检查每个依赖项。

可能有两个问题。 首先,您需要确保在使用jQuery之前包含jQuery。 如果你在部分中嵌入了javascript,这可能会很棘手。 如果您在标题中加载jQuery,并在正文末尾的脚本块中加载所有其他脚本,则可以确保在其他代码之前加载了jQuery。 我尝试将所有内容放在正文的末尾,jQuery是第一个加载的脚本。

其次,在尝试在脚本中使用DOM之前,需要确保DOM已完全加载。 jQuery为此提供了一个现成的方法。 将代码包装在ready方法中,您可以(更确定)DOM可供您使用。 并非所有图像都可以加载,但您应该可以使用其他所有图像。 对于图像,如果对代码至关重要,则可能需要花费更多精力来确保它们已加载。

  $(document).ready( function() { ...your code here... }); 

或(简写)

  $(function() { ... your code here... }); 

当浏览器遇到一个script元素时它会阻塞,这意味着只要你有一个script元素任何想要使用jQuery的脚本之前加载jQuery,你应该没问题,例如

   

有关此主题的一些其他注释,请参阅JavaScript加载顺序 。

将代码放在jquery之后并执行此操作

 $(document).ready( { // your code } ); 

通常,您只需在jquery中使用以下基本的“文档加载”测试。 直接从初学者jquery教程 :

  $(document).ready(function() { // do stuff when DOM is ready }); 

我可以想到为什么这不起作用的任何原因,肯定有数百万个使用jquery的网站依赖于这些代码。