logo标签列表

在页面完全加载后加载jQuery

javascriptjqueryhtml
15

我正在寻找一种方法，在页面完全加载后加载jquery。
虽然这里有很多关于它的问题和答案，但都描述了如何运行一个需要在页面或jquery完全加载后运行的脚本。
我要找的是先加载页面，然后调用jquery，在jquery加载后调用函数。类似于：

document.onload=function(){
   var fileref=document.createElement('script');
  fileref.setAttribute("type","text/javascript");
  fileref.setAttribute("src", 'http://code.jquery.com/jquery-1.7.2.min.js');
  //Here I need an event to know that jquery is 
  //loaded to run stuff that needs jquery
}
2
我能知道你为什么需要这个吗？ - Irvin Dominin
谷歌分析一直在说我的脚本会减慢页面加载，并建议在页面加载后再加载它。 - Ashkan Mobayen Khiabani
2
也许你可以把Javascript代码放在一个单独的文件中，然后在body底部包含该脚本。 - user2109908
2
这篇文章非常好地解释了何时加载JavaScript以及为什么要这样做。https://dev59.com/k3fZa4cB1Zd3GeqPPD2J - caramba
11个回答
0
我在6年前就问过这个问题，但是得到的任何答案都有一些缺陷。后来我自己想出了一个解决方案，自那以后我一直在使用它。现在我又遇到了自己的问题，并且发现它有很多浏览量，所以我想分享一下，因为我认为它可能会帮助其他人。
这个问题主要出现在主从类型的页面上（可以是旧的.master和.aspx页面）或者（asp.net中的布局和视图）或者其他类似的情况，但总是涉及到主从模式。
对于解决方案，我只需要在页面开头添加一个数组即可：
<script>var after = [];</script>

任何需要 jQuery 或在此部分之后运行的其他脚本的函数，我都不会直接运行它，而是将其推送到这个数组中：
after.push(function(){
     // code that requires scripts that will load later,
     //might be for example a jQuery selector or ...
});

然后在页面的最末尾，在关闭 body 标签之前（当然脚本已经加载了），我运行所有 (以下命名为) after 数组中的函数：

<script>for(var i=0;i<after.length;i++)after[i]();</script>
</body>

我觉得这种方式非常简单、易懂且无瑕疵。

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接