美文网首页
谈谈document.ready和window.onload的区

谈谈document.ready和window.onload的区

作者: Myselfyan | 来源:发表于2017-11-04 14:39 被阅读0次

    在Jquery里面,我们可以看到两种写法:$(function(){}) 和$(document).ready(function(){})

    这两个方法的效果都是一样的,都是在dom文档树加载完之后执行一个函数(注意,这里面的文档树加载完不代表全部文件加载完)。

    而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

    那么Jquery里面$(document).ready函数的内部是怎么实现的呢?下面我们就来看看:

    我们来为document添加一个ready函数:

    document.ready =function(callback) {///兼容FF,Googleif(document.addEventListener) {

    document.addEventListener('DOMContentLoaded',function() {

    document.removeEventListener('DOMContentLoaded', arguments.callee,false);

    callback();

    },false)

    }//兼容IEelseif(document.attachEvent) {

    document.attachEvent('onreadystatechange',function() {if (document.readyState == "complete") {

    document.detachEvent("onreadystatechange", arguments.callee);

    callback();

    }                })            }elseif(document.lastChild ==document.body) {

    callback();

    }

    document.ready这个函数是实现了。我们再来验证一下最上面所说的“ready要比onload先执行”

    window.onload =function() {

    alert('onload');

    };

    document.ready(function() {

    alert('ready');

    });

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

    相关文章

      网友评论

          本文标题:谈谈document.ready和window.onload的区

          本文链接:https://www.haomeiwen.com/subject/jewfmxtx.html