JS 替换 window.onload 的 document.ready

最新推荐文章于 2024-08-15 11:39:27 发布

午夜玫瑰钻

最新推荐文章于 2024-08-15 11:39:27 发布

阅读量690

点赞数

CC 4.0 BY-SA版权

分类专栏：前端Javascript相关操作说明文章标签： javascript js定时器框架移动对象

本文链接：https://blog.youkuaiyun.com/gujinapenggu5/article/details/50433439

前端Javascript相关操作说明专栏收录该内容

48 篇文章

订阅专栏

本文介绍了一种在不使用jQuery的情况下实现类似$(document).ready()功能的方法，通过自定义document.ready()函数，可以在DOM加载完成后立即执行指定的JavaScript代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

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

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

看代码：

01    (function () {
02      var ie = !!(window.attachEvent && !window.opera);
03      var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
04      var fn = [];
05      var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); };
06      var d = document;
07      d.ready = function (f) {
08        if (!ie && !wk && d.addEventListener)
09          return d.addEventListener('DOMContentLoaded', f, false);
10        if (fn.push(f) > 1) return;
11        if (ie)
12          (function () {
13            try { d.documentElement.doScroll('left'); run(); }
14            catch (err) { setTimeout(arguments.callee, 0); }
15          })();
16        else if (wk)
17          var t = setInterval(function () {
18            if (/^(loaded|complete)$/.test(d.readyState))
19              clearInterval(t), run();
20          }, 0);
21      };
22    })();

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

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

打开页面，看到效果没？YES，这就是去掉了 $(); 的 document.ready(); 咱不再依赖 jQuery，但如果你的站点已经使用了 jQuery，就不用再多此一举了。
如果你并没有感觉到明显的区别，你可以到百度里随便便搜一张很大加载速度又慢的图片放到页面里试一试，打开一看，效果就很明显了。

下面还有一个来自于 PHPWind 论坛程序中某个脚本中的函数片段:

01    ~function() {
02      var FNArray=[];
03      var D = document;
04
08      window.onReady = function(fallBackFunction) {
09
10        var argu=[];
11        for(var i=1,len=arguments.length; i<len; i++) {
12          argu.push(arguments[i]);
13        }
14        var is_ie = !!(window.attachEvent && !window.opera); //增加的
15        if(window.readyBound) return fallBackFunction.apply(this,argu);
16        if(!is_ie) return   fallBackFunction.apply(this,argu);
17        FNArray.push(fallBackFunction);
18        readyBound = true;
19        var ready = 0;
20        //Mozilla, Opera and webkit nightlies currently support this event
21        if(D.addEventListener) {
22          //Use the handy event callback
23          D.addEventListener("DOMContentLoaded", function() {
24            D.removeEventListener("DOMContentLoaded", arguments.callee, false);
25            if(ready) return;
26            ready = 1;
27            for(var i=0,len=FNArray.length; i<len; i++) {
28              FNArray[i] ? FNArray[i].apply(this,argu) : 0;
29            }
30          }, false);
31
32        // If IE event model is used
33        } else if(D.attachEvent) {
34          // ensure firing before onload,
35          // maybe late but safe also for iframes
36          D.attachEvent("onreadystatechange", function() {
37            if(D.readyState === "complete") {
38              D.detachEvent("onreadystatechange", arguments.callee);
39              if (ready) return;
40              ready = 1;
41              for(var i=0,len=FNArray.length; i<len; i++) {
42                FNArray[i] ? FNArray[i].apply(this,argu) : 0;
43              }
44            }
45          });
46
47          // If IE and not an iframe
48          // continually check to see if the D is ready
49          if(D.documentElement.doScroll && window == window.top)(function() {
50            if(ready) return;
51            try {
52              // If IE is used, use the trick by Diego Perini
53              // http://javascript.nwbox.com/IEContentLoaded/
54              D.documentElement.doScroll("left");
55            } catch(error) {
56              setTimeout(arguments.callee, 0);
57              return;
58            }
59            ready = 1;
60            for (var i=0,len=FNArray.length; i<len; i++) {
61              FNArray[i] ? FNArray[i].apply(this,argu) : 0;
62            }
63          })();
64        }
65      };
66    }();

这段的用法是：

1    window.onReady(function(){
2      alert('Bingo~!');
3    });

两个原理相同，唯一不同的区别是 window.onReady() 除了第一个参数可以传递要执行的函数外，还可以在后面的参数传递要传给第一个参数函数中的参数...额，前面这句话怎么这么别扭呢..意思就是 onReady 第一个参数之后的参数都将作为另外的参数传递给第一个参数的函数..好像还有点别扭??不管了，你自己理解了，总之这个传参的功能用的不多。
window.onReady(); 的传参功能实际用处不多，实现方法也是一样，代码这么多，当然还是推荐使用 document.ready();

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

最后提供压缩版 document.ready();

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