原生JS实现document.ready以及和window.onload的先后顺序

wangym 发布于2019-08-23 12:12 / 2048人阅读

摘要：和的区别是上面定义的方法在树加载完成后就会执行，而是在页面资源比如图片和媒体资源，它们的加载速度远慢于的加载速度加载完成之后才执行。也就是说要比先执行。验证一下要比先执行执行这段代码之后，你会看到浏览器里面会先弹出在弹出。

jQuery 里面的文档就绪用法

在jQuery里面，我们可以看到两种写法:
$(function(){}) 和 $(document).ready(function(){})，
这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数,
（注意，这里面的ready 是 DOM树加载完成，不是onload的页面资源加载完成的）。

document.ready方法 原生js本身并没有提供 document.ready方法

//document是一个DOM对象，这个对象本身没有ready方法，要使用就得自己定义，而且过程颇为复杂
//其中一种方法是：
document.ready = function (callback) {
            ///兼容FF,Google
            if (document.addEventListener) {
                document.addEventListener("DOMContentLoaded", function () {
                    document.removeEventListener("DOMContentLoaded", arguments.callee, false);
                    callback();
                }, false)
            }
             //兼容IE
            else if (document.attachEvent) {
                document.attachEvent("onreadystatechange", function () {
                      if (document.readyState == "complete") {
                                document.detachEvent("onreadystatechange", arguments.callee);
                                callback();
                       }
                })
            }
            else if (document.lastChild == document.body) {
                callback();
            }
        }

//还有一种方法是：
(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(){} );
//结论是原生js本身并没有提供 document.ready方法

window.onload 在没定义方法之前，它只是一个值为null的属性

//控制台打印一下window,看看onload是什么东东
window
//other...
onlanguagechange:null
onload:null
onloadeddata:null
//other...

//可以看到window的onload属性的值是null
//window.onload = function() {//code...}

//在使用的时候：先使用函数表达式的方式给它定义函数，很容易犯错的是 将它当作函数直接使用。

document.ready 和 window.onload 的区别是：

上面定义的document.ready方法在DOM树加载完成后就会执行，而window.onload是在页面资源（比如图片和媒体资源，它们的加载速度远慢于DOM的加载速度）加载完成之后才执行。也就是说$(document).ready要比window.onload先执行。

验证一下 ready 要比 onload 先执行：

 window.onload = function () {
            alert("onload");
        };

        document.ready(function () {
            alert("ready");

        });

执行这段代码之后，你会看到浏览器里面会先弹出ready,在弹出onload。

GPU服务器私有云引入js的先后顺序原生js实现 ajax原生js实现原生js实现addclass

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98111.html

onload事件与ready的区别

摘要：好久没写文章了，再来一波，首先上图参考链接与的区别详见浏览器工作原理浏览器工作原理前言页面加载完成有两种事件一是，表示文档结构结构已经加载完成不包含图片等非文字媒体文件，二是，指示页面包含图片等文件在内的所有元素都加载完成。好久没写文章了，再来一波，首先上图： showImg(https://segmentfault.com/img/bVLD32?w=1105&h=244); 参考...

mating 2019-08-20 15:33 评论0 收藏0
document.ready和window.onload的区别

摘要：和的区别文档加载完成事件页面加载完成有两种事件一是，表示文档结构已经加载完成不包含图片等非文字媒体文件二是，指示页面包含图片等文件在内的所有元素都加载完成。即当所有链接被鼠标单击的时候，都执行也就是说页面加载时绑定，真正该触发时触发。 document.ready和onload的区别——JavaScript文档加载完成事件页面加载完成有两种事件：一是ready，表示文档结构已经加载完...

B0B0 2019-08-23 14:14 评论0 收藏0
WEB页面的生命周期,DOMContentLoaded,load,beforeunload,unlo

摘要：简言理解页面的生命周期，文档加载事件及顺序对开发有十分的重要意义。同步的脚本最先执行，它先于事件执行。当准备就绪时，事件在上触发。表示文档的当前状态，可以在事件中跟踪文档状态的变更。已经解析完毕时触发，几乎与同时发生，但在事件之前触发。简言理解WEB页面的生命周期，文档加载事件及顺序对WEB开发有十分的重要意义。如果不理解，在元素未加载就提前操作元素，则得不到想要的结果。而如果页面...

Jingbin_ 2019-08-22 14:50 评论0 收藏0
【面试篇】JS基础知识查漏补缺

摘要：因为在页面加载完成后，引擎维护着两个队列，一个是按页面顺序加载的执行队列，还有一个空闲队列，使用定时函数就是将回调函数加入到空闲队列中，故和其他定时器是并发执行的。 1.window.onload和$(document).ready()的区别： ①执行时间：window.onload会在所有元素，包括图片,引用文件加载完成之后执行，而$(document).ready()则会在HTML...

myeveryheart 2019-08-20 16:02 评论0 收藏0
理解浏览器是如何加载及渲染网页的

摘要：的速度明显快于重排重绘与的区别理解了浏览器是如何渲染页面之后我们再来比较这两者就很好理解了执行的时间必须等到页面内包括图片的所有元素加载完毕后才能执行。先上图，我们再慢慢解释，这图就是浏览器加载网页的一个过程 showImg(https://segmentfault.com/img/remote/1460000008648335?w=516&h=425); 当我们在浏览器输入一个地址...

kevin 2019-08-21 11:36 评论0 收藏0