js中替换window.onload的方法 document.ready

 通常我们想要在页面内容加载完成后运行 JS 时，都会使用 window.onload 来处理，比如：

 <script language="javascript">

       window.onload = function () {

               alert('Hello World!');

        }

 </script>

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

      jQuery 提供一个 $(document).ready(); 来解决此问题，当页面 DOM 加载完成后，ready() 里的函数便会立即执行，但如果我们在不使用 jQuery 的情况下呢？
好了，废话不多说，大家都明白想要什么，以下是来自国外网站的一段代码，功能同等于 jQuery 的 $(document).ready();

看代码：

<script language='javascript'>

(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);
  };
})();

</script>

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

 

<script language='javascript'>

   document.ready(function(){

           alert('Document is ready!');

   });

</script>

      打开页面，看到效果没？YES，这就是去掉了 $(); 的 document.ready(); 咱不再依赖 jQuery，但如果你的站点已经使用了 jQuery，就不用再多此一举了。

      另外还有一个来自于 PHPWind 论坛程序中某个脚本中的函数片段（由于字数限制，此处省略，详细的可看原文作者：http://www.vgot.net/?A65.htm ）

      其实 window.onload 也并非是一无用处，很多情况下一些B/S软件需要页面全部加载后才提供用户相关功能，这样 window.onload 就可以提供一种“加载中”的功能，又或者是页面内容很少，完全无需 document.ready(); 根据各种情况，应该合理的使用 onload 和 ready。

 

 

                                  为保护作者版权，特此连接原文作者连接：http://www.vgot.net/?A65.htm

 

另外：经实践得知，两者都可以加载多个函数