jQuery 加载速度比其他应该使用它的脚本慢答案

【问题标题】：jQuery loads slower than the other script which sould use itjQuery 加载速度比其他应该使用它的脚本慢
【发布时间】：2011-09-03 22:30:17
【问题描述】：

我想知道，jQuery 加载后如何运行一些东西？ jQuery 是否有“我准备好了”事件？

首先在我的 getls.js 中

var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com/setls.js';
document.getElementsByTagName('body')[0].appendChild(script);

然后在 setls.js 中

if (typeof jQuery == 'undefined') {  
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js';
    document.getElementsByTagName('body')[0].appendChild(script);
}
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'http://example.com/ls.js';
document.getElementsByTagName('body')[0].appendChild(script);

ls.js

$("body").css("background-color", "green");

但是 ls.js 的加载速度比 jquery 快，并且告诉我 Uncaught ReferenceError: $ is not defined。我该如何处理这个事件？感谢您的帮助。

编辑：这是因为这个脚本类似于谷歌分析，你知道的。让用户只使用一行脚本并在他的代码中加载getls.js，这会让他很高兴（哦，酷，它只有 4 行？需要）。但我也必须检查 jQuery，因为我稍后会使用 jQuery，如果已经得到它，我无法再次加载它。在此之后我想使用它。
所以它不是关于document.ready 事件，文档在我开始加载 jQuery 之前就已经准备好了。

【问题讨论】：

首先为什么你没有加载 jquery 作为你的脚本声明的一部分并且你正在使用 jquery 为什么要使用文档对象及其方法.. :/
他还想动态加载jQuery。

标签： javascript jquery html loading dereference

【解决方案1】：

您希望动态加载这两个脚本。你有两个选择：

在您要注入的脚本上使用onload。所有主要浏览器都支持它，但在 IE 上对其进行测试，因为几年前它在 IE 上无法运行。这是一个干净的解决方案。
使用计时器轮询是否存在 jQuery 变量，使用 typeof(window.jQuery)。定义好之后，就应该加载 jQuery。

【讨论】：

不，onload 不仅适用于正文，还适用于许多其他元素，其中包括 img 和 script。一旦加载了外部资源（img 标签的图像，或者脚本标签的 js 文件），它将触发。
英雄。完美运行 =>> if(typeof jQuery=="undefined"){var script=document.createElement("script");script.type="text/javascript";script.setAttribute("onLoad","lsinit()");script.src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js";document.getElementsByTagName("body")[0].appendChild(script)} 和 ls.js 中的 lsinit function(){$("body").css("background-color", "green");}

【解决方案2】：

只需让 JQuery 使用 $.getScript() 加载您的 ls.js，而不是竞争条件

$.getScript('http://example.com/ls.js', function(data, textStatus){
   console.log(data); //data returned
   console.log(textStatus); //success
   console.log('Load was performed.');
});

http://api.jquery.com/jQuery.getScript/

【讨论】：

neet，但我当时没有 jquery。 :(

【解决方案3】：

循环检查直到 jQuery 可用：

//Have to wait until jQuery will arrive
function wait_for_jQuery(){
    if (typeof jQuery == 'undefined'){
        setTimeout(wait_for_jQuery, 50);
    }else{
        $(document).ready(main()); 
    }
}
wait_for_jQuery();

function main(){ ... };

【讨论】：

【解决方案4】：

将您的代码包装成这样：

$(document).ready(function(){

//your code

}

这会等待加载 DOM 以及所有脚本和 css 文件。并确保将 jquery 的 - 标签添加到您的 javascript 文件之前。

【讨论】：

$(function(){ 做同样的事情，节省一些打字;)
没错，但为了便于阅读，我更喜欢文档内容；)
-1 这不是 DOM 就绪问题，这是 @Alienwebguy 所说的延迟 javascript 加载竞争条件
在 DOM 检查之前添加类似 <script>!window.jQuery && document.write('<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"><\/script>')</script> 的内容。
@feela 为什么是 1.4.4？截至此评论，JQuery 为 1.6.2。

【解决方案5】：

jQuery 有一个“我准备好了”事件。您要做的是将代码包装在：

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

这将延迟文档内部代码的执行，直到 DOM 和 jQuery 完全加载。此外，将所有脚本标签放在页面底部是提高效率的好习惯。

【讨论】：