页面加载完成以后，Js 实现document.ready

通常我们想在页面加载完成后执行脚本，都会使用：

window.onload = function(){
  alert('Hello World!');
};

这段代码将在页面载入完成后弹出一个 "Hello World!" 的警告框，但是众所周知，window.onload 的特点是页面元素全部加载完成后才执行，比如页面内有大量的图片之类，当打开网页时，其实相关的 DOM 已经全部加载完成，此时已经可以执行你想要执行的脚本了，可是图片的加载速度要很慢于页面的 HTML，这会使得脚本的执行速度大大降低

 

jQuery 提供一个 $(document).ready(); 来解决此问题，当页面 DOM 加载完成后，ready() 里的函数便会立即执行，顺便了解一下相关写法：

// 1
jQuery(document).ready(function($) {
alert("你好");

});

// 2

$(document).ready(function() {
alert("你好");

});

// 3

jQuery(function() {
alert("你好");

});

// 4

$(function() {
alert("你好");

});

// 5立即执行匿名函数，只不过参数是jQuery对象

(function() {
alert("你好");

})(jQuery);

//或

(function() {
alert("你好");

})($);

//或

(function() { 
 alert("你哈"); 

})();

我经常会用$(function(){  });简写方法实现，这个也是最常见的，不过这个简写函数有时会失效，所以现在都是用第一种书写方式编写的。

jQuery(document).ready(function($) {   });

以上几种方式在Js里就是用window.onload = function () {};函数代替。

但如果我们想在不使用 jQuery 的情况下实现，DOM 元素加载完毕后执行函数？
如下：

(function () {
var ie = !!(window.attachEvent && !window.opera);
var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
var d = document;
d.ready = function (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
if (fn.push(f) > 1) return;
if (ie)
(function () {
try { d.documentElement.doScroll('left'); run(); }
catch (err) { setTimeout(arguments.callee, 0); }
})();
else if (wk)
var t = setInterval(function () {
if (/^(loaded|complete)$/.test(d.readyState))
clearInterval(t), run();
}, 0);
};
})();

把这段代码放到页面中或者某个脚本里面，然后就可以像下面这样使用了：

document.ready(function(){
   alert('Document is ready!');
});

压缩版document.ready();

(function () {
   var ie =!!(window.attachEvent&&!window.opera),wk=/webkit\/(\d+)/i.test(navigator.userAgent)&&(RegExp.$1<525);
   var fn =[],run=function(){for(var i=0;i<fn.length;i++)fn[i]();},d=document;d.ready=function(f){
   if(!ie&&!wk&&d.addEventListener){returnd.addEventListener('DOMContentLoaded',f,false);}if(fn.push(f)>1)return;
   if(ie)(function(){try{d.documentElement.doScroll('left');run();}catch(err){setTimeout(arguments.callee,0);}})();
   else if(wk)var t=setInterval(function(){if(/^(loaded|complete)$/.test(d.readyState))clearInterval(t),run();},0);};
})();