码迷,mamicode.com
首页 > Web开发 > 详细

JS实现document.ready

时间:2020-01-19 12:43:00      阅读:102      评论:0      收藏:0      [点我收藏+]

标签:等于   dev   asc   push   user   post   exp   als   网站   

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

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

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

 

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

看代码:

 

(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(){
   document.getElementById(‘test‘).innerHTML = ‘document.ready test!‘; //找到
  });
 

 

 

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

  

 

JS实现document.ready

标签:等于   dev   asc   push   user   post   exp   als   网站   

原文地址:https://www.cnblogs.com/guiyishanren/p/12213060.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!