jQuery 是如何判断HTML页面加载完毕的?它的原理是什么?

html-css030

jQuery 是如何判断HTML页面加载完毕的?它的原理是什么?,第1张

jquery是一个轻量级的JS框架,这点相信大部分人都听过,而jquery之所以有这样一个称呼,就是因为它悄悄披了一件外衣,将自己给隐藏了起来。

//以下截取自jquery源码片段(function( window, undefined ) {   /*    源码内容    */})( window )

上面这一小段代码来自于1.9.0当中jquery的源码,它是一个无污染的JS插件的标准写法,专业名词叫闭包。可以把它简单的看做是一个函数,与普通函数不同的是,这个函数没有名字,而且会立即执行,就像下面这样,会直接弹出字符串。

(function( window, undefined ) {

alert("Hello World!")

})( window )

可以看出来这样写的直接效果,就相当于我们直接弹出一个字符串。但是不同的是,我们将里面的变量变成了局域变量,这不仅可以提高运行速度,更重要的是我们在引用jquery的JS文件时,不会因为jquery当中的变量太多,而与其它的JS框架的变量命名产生冲突。对于这一点,我们拿以下这一小段代码来说明。

var temp = "Hello World!"

(function( window, undefined ) {       var temp = "ByeBye World!"

})( window )

alert(temp)

这段代码的运行结果是Hello而不是ByeBye,也就是说闭包中的变量声明没有污染到外面的全局变量,倘若我们去掉闭包,则最终的结果会是ByeBye,就像下面这样。

var temp = "Hello World!"//    (function( window, undefined ) {

var temp = "ByeBye World!"//    })( window )

alert(temp)

由此就可以看出来,jquery的外衣就是这一层闭包,它是很重要的一个内容,是编写JS框架必须知道的知识,它可以帮助我们隐藏我们的临时变量,降低污染。

这个问题我之前刚看过。

他用的不是window.onload

$(document).ready是在页面加载完毕时执行回调

而window.onload是在页面全部加载完成时,包括一些资源比如图片。

所以window.onload比$(document).ready更延后一些。

window.onload自然不必说,是浏览器自身支持的。

但是$(document).ready我看了一下源代码。

他根据的是document.documentElement对象去判断的。

他每次调用document.documentElement.scrollLeft方法

如果此方法产生了异常,就说明scrollLeft无法执行,此时页面还未加载完成,

所以他就用try块包含这条语句,然后catch住,用setTimeout方法,重新执行一遍。

直到scrollLeft可以执行时,就说明页面加载完成了,此时再去回调。

很有意思。