加载之ready和onload

Posted 2020-09-07 cosyer的博客

页面加载完成有两种事件，一是ready，表示文档结构已经加载完成（不包含图片等非文字媒体文件），二是onload，指示页面包含图片等文件在内的所有元素都加载完成。

真不知道这个标题该怎么取，暂时就先凑活着用了。

用jQ的人很多人都是这么开始写脚本的：

 

$(function(){

 

// do something

 

});

其实这个就是jq ready()的简写，他等价于：

 

$(document).ready(function(){

//do something

})

//或者下面这个方法，jQuer的默认参数是：“document”；

$().ready(function(){

//do something

})

这个就是jq ready()的方法就是Dom Ready，他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。

一般情况先一个页面响应加载的顺序是，域名解析-加载html-加载js和css-加载图片等其他信息。

那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间，就可以操作Dom了。

2、Dom Load

用原生的js的时候我们通常用onload时间来做一些事情，比如：

 

window.onload=function(){

//do something

}

//或者经常用到的图片，假设这个

document.getElementById("imgID").onload=function(){

//do something

}

这种就是Dom Load，他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作，document文档包括了加载图片等其他信息。

那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后，就可以操作Dom了。

3.用个最常用的例子说明Dom Ready和Dom Load两者的区别

Dom Ready是在dom加载完成后就可以直接对dom进行操作，比如一张图片只要<img>标签完成，不用等这个图片加载完成，就可以设置图片的宽高的属性或样式等；

Dom Load是在整个document文档（包括了加载图片等其他信息）加载完成后就可以直接对dom进行操作，比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等；

比如一个图片浏览的效果，通常如果图片尺寸很大的情况下，为了防止图片把页面撑开通常会限定图片的宽度或高度，如果是单张图片或者是多张规格比例统一的图片下我们可以直接在<img>上价格宽度或者高度的属性<img src=“img.jpg” alt=”码头的大照片” width=“100” height=“90”>，比如（推荐）或者可以在css样式中加宽度或者高度的属性。但是如果这些张规格比例不统一的图片要浏览呢？那就有问题，你设置宽高很可能造成图片严重失真。在ie6之后ie7，ie8还有其他主流浏览器支持css2.1中min-width，max-width，min-height，max-width，这样我们就可以用min-width，max-width，min-height，max-width解决这些问题，但是ie6除非是抛弃性能问题用css表达式（当然old9(http://old9.blogsome.com/2008/10/26/css-expression-reloaded/)和怿飞(http://www.planabc.net/2009/09/21/optimization_of_css_eexpression/)有关于css表达式性能问题的解决方案,大家可以看一下）。这个时候ie的做好解决方案就是用Dom Ready而不是Dom Load，因为通常大图片加载的时候会一点一点的加载，这个在尺寸大，字节多，网速慢的时候表现的非常明显，用Dom Load，通常是先把页面撑开，加载完成后再把图片重设宽高，图片加载多少时间，这个页面就会撑开多久，用户会非常难受！！

这点可以看我做的一个的一个小demo：http://www.css88.com/demo/domready/(注意第二次测试的时候要清除缓存)

Dom Ready在jQ中的基本的写法：

 

$().ready(function() {

 

$("#big_A").width("100px");

 

});

在原生的js中没有Dom Ready的直接方法，只有Dom Load的方法就是load事件。

有牛人封装了很多方法，jq，YUI等js库也是封装出来的，呵呵。

以下是来自http://www.cnblogs.com/rubylouvre/archive/2009/12/30/1635645.html的一个Dom Ready的方法：

 

new function(){

 

dom = [];

 

dom.isReady = false;

 

dom.isFunction = function(obj){

 

return Object.prototype.toString.call(obj) === "[object Function]";

 

}

 

dom.Ready = function(fn){

 

dom.initReady();//如果没有建成DOM树，则走第二步，存储起来一起杀

 

if(dom.isFunction(fn)){

 

if(dom.isReady){

 

fn();//如果已经建成DOM，则来一个杀一个

 

}else{

 

dom.push(fn);//存储加载事件

 

}

 

}

 

}

 

dom.fireReady =function(){

 

if (dom.isReady)  return;

 

dom.isReady = true;

 

for(var i=0,n=dom.length;i<n ;i++){

 

var fn = dom[i];

 

fn();

 

}

 

dom.length = 0;//清空事件

 

}

 

dom.initReady = function(){

 

if (document.addEventListener) {

 

document.addEventListener( "DOMContentLoaded", function(){

 

document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除加载函数

 

dom.fireReady();

 

}, false );

 

}else{

 

if (document.getElementById) {

 

document.write("<script id=\\"ie-domReady\\" defer=\'defer\'src=\\"//:\\">< \\/script>");

 

document.getElementById("ie-domReady").onreadystatechange = function() {

 

if (this.readyState === "complete") {

 

dom.fireReady();

 

this.onreadystatechange = null;

 

this.parentNode.removeChild(this)

 

}

 

};

 

}

 

}

 

}

 

}

使用方法：

 

dom.Ready(function(){

 

alert("我的domReady！")

 

});

 

dom.Ready(function(){

 

alert("我的domReady测试多重加载1！")

 

});

 

dom.Ready(function(){

 

alert("我的domReady测试多重加载2!")

 

});

 

dom.Ready(function(){

 

alert(document.getElementById("test").innerHTML)

 

});