网站地图
【www.gdgbn.com--jquery】
jquery的ready则是指在页面的dom模型加载完后执行指定的函数
ready肯定在onload之前发生，页面加载大或者多的图片而使onload执行延后，使用jquery的ready可缓解此问题
jquery中如何实现
1. ready(fn) 提供给外界的绑定事件的借口。
源码
ready: function( fn ) {
jquery.bindready(); //添加监听函数
if ( jquery.isready ) { //如果dom加载完成了
fn.call( document, jquery ); //立刻执行函数
} else if ( readylist ) {
readylist.push( fn ); //否则把函数添加进readylist
}
return this;
},
ready: function() {
if ( !jquery.isready ) {
if ( !document.body ) {
return settimeout( jquery.ready, 13 );
}
jquery.isready = true; //设置isready
if ( readylist ) {
var fn, i = 0;
while ( (fn = readylist[ i++ ]) ) {
fn.call( document, jquery );
}
readylist = null;
}
if ( jquery.fn.triggerhandler ) {
jquery( document ).triggerhandler( "ready" );
}
}
}
bindready() 绑定事件监听器的方法 屏蔽了浏览器的差异
看看bindready的实现
bindready: function() {
if ( readybound ) { //默认为false
return;
}
readybound = true;
if ( document.readystate === "complete" ) {
return jquery.ready();
}
if ( document.addeventlistener ) { document.addeventlistener("domcontentloaded",domcontentloaded, false );
window.addeventlistener( "load", jquery.ready, false );
} else if ( document.attachevent ) {
document.attachevent("onreadystatechange", domcontentloaded);
window.attachevent( "onload", jquery.ready );
var toplevel = false;
try {
toplevel = window.frameelement == null;
} catch(e) {}
if ( document.documentelement.doscroll && toplevel ) {
doscrollcheck();
}
}
}
doscrollcheck() 为ie浏览器测试的方法
doscrollcheckfunction doscrollcheck() {
if ( jquery.isready ) {
return;
}
try {
document.documentelement.doscroll("left");
} catch( error ) {
settimeout( doscrollcheck, 1 );
return;
}
//不停的执行document.documentelement.doscroll("left")
jquery.ready();
}
4. domcontentloaded() 移除了绑定的domcontentloaded监听器，并且调用jquery.ready()方法
源码展示:domcontentloaded = function() {
document.removeeventlistener( "domcontentloaded", domcontentloaded, false );
jquery.ready();
};
之所以用这个来取代window.onload，就是因为它是在dom模型加载完成后就执行，而window.onload是在dom元素加载完全后才执行
kimipolo
<script type="text/网页特效">
if (document.addeventlistener) {
document.addeventlistener("domcontentloaded", init, false);
}
// for internet explorer (using conditional comments)
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=javascript：void(0)></script>");
var script = document.getelementbyid("__ie_onload");
script.onreadystatechange = function() {
if (this.readystate == "complete") {
init(); // call the onload handler
}
};
/*@end @*/
window.onload=inits;
function inits(){
idtest=document.getelementbyid("test");
alert("window.onload加载^_^n"+idtest.src);
}
function init(){
idtest=document.getelementbyid("test");
alert("立即加载^_^n"+idtest.src)
}
</script>
