Vil*_*ger 20 javascript jquery
我有一个网页.加载此网页时,我想执行一些JavaScript.这个JavaScript使用JQuery.但是,似乎在加载页面时,jQuery库尚未完全加载.因此,我的JavaScript无法正常执行.
在执行JavaScript之前,确保加载jQuery库有哪些最佳实践？
Sha*_*son 55
已经有几个答案,每个答案都很好但是所有答案都依赖于确保在任何依赖项尝试使用之前同步下载jQuery.这种方法非常安全,但在下载和解析jQuery库脚本时,也无法下载/运行其他资源,效率低下.如果你使用嵌入式标记将jQuery放在头部,那么用户浏览器在下载和处理jQuery时将处于空闲状态,因为它可以执行其他操作,例如下载图像,下载其他脚本等.
如果您正在寻找启动时的快速响应,那么每毫秒都很重要.
在过去一年左右的时间里,史蒂夫·索德斯(Steve Souders)首先在雅虎工作,现在在谷歌工作.如果您有时间,请查看他的幻灯片,以获取更快的网站和高性能网站.优秀.对于一个巨大的释义,继续在这里.
将javascript文件附加到DOM时,发现在文档的<head>中放入一个内联<script>标记会导致大多数浏览器在下载和解析该文件时阻塞.IE8和Chrome是例外.要解决此问题,可以通过document.createElement创建"script"元素,设置适当的属性,然后将其附加到文档头.这种方法不会阻止任何主流浏览器.
<script type='text/javascript'>
// Attaching jQuery the non-blocking way.
var elmScript = document.createElement('script');
elmScript .src = 'jQuery.js'; // change file to your jQuery library
elmScript .type = 'text/javascript';
document.getElementsByTagName('head')[0].appendChild( elmScript );
</script>
这确保了jQuery在下载和解析时不会阻止下载和解析任何其他图像或javascript文件.但是,如果你有一个依赖于jQuery的脚本在jQuery之前完成下载,这可能会出现问题.jQuery不会出现,你会得到一个错误,说$或jQuery是未定义的.
因此,为了确保您的代码能够运行,您必须进行一些依赖性检查.如果不满足您的依赖关系,请稍等片刻再试一次.
<script type='text/javascript'>
runScript();
function runScript() {
// Script that does something and depends on jQuery being there.
if( window.$ ) {
// do your action that depends on jQuery.
} else {
// wait 50 milliseconds and try again.
window.setTimeout( runScript, 50 );
}
}
</script>
就像我之前说过的那样,之前显示的方法没有任何问题,它们都是有效的,并且都有效.但是这种方法将确保您在等待jQuery时不会阻止页面上其他项的下载.
此方法适用于任何文件,因此如果必须包含10个js文件,则可以使用此方法附加每个文件.您只需确保检查功能在运行之前检查每个依赖项.
Bli*_*ixt 12
jQuery库应该包含在<head>页面的一部分中:
<script src="/js/jquery-1.3.2.min.js" type="text/javascript"></script>
你自己的代码应该在此之后.JavaScript是线性和同步加载的,因此只要按顺序包含脚本,就不必担心它.
要在DOM完成加载时执行代码(因为在发生这种情况之前你不能真正使用大量的jQuery库),请执行以下操作:
$(function () {
// Do stuff to the DOM
$('body').append('<p>Hello World!</p>');
});
如果你正在混合JavaScript框架并且它们互相干扰,你可能需要像这样使用jQuery:
jQuery(function ($) { // First argument is the jQuery object
// Do stuff to the DOM
$('body').append('<p>Hello World!</p>');
});