window.onload 和 $(document).ready()

window.load是当页面所有资源全部加载完成后(包括DOM文档树,css文件,js文件,图片资源等),执行一个函数。

$(document).ready()是当DOM文档树加载完成后执行一个函数 (不包含图片,css等),在执行的时候会优先于window.onload执行,而原始js是没有document.ready方法的,使用的时候通常是在jquery的前提下使用。

通过实例可以证明document.ready 会优于 window.onload 执行

    function loaded() {
        console.log('window onload');
    };

    function readyed() {
        console.log('document 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();
        }
    };
    //{1}
    window.onload = function(callback) {
        loaded();
    };
    //{2}
    document.ready(readyed);

按照js的执行顺序,会先执行{1},然后执行{2},最后打出的日志为:

  • document ready
  • window onload
    因此,document.ready 会优于 window.onload 执行。
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数document.ready原生中...
    溺水的睫毛阅读 2,740评论 0 0
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    极乐君阅读 5,603评论 0 106
  • 1.几种基本数据类型?复杂数据类型?值类型和引用数据类型?堆栈数据结构? 基本数据类型:Undefined、Nul...
    伯纳乌的追风少年阅读 25,899评论 2 46
  • 今天晚班又从南环往家赶。每次沿着中华大街从南向北穿行的时候。都觉得路遥远的没有尽头,尤其是在傍晚的这种时候。 傍晚...
    阿墨2017阅读 160评论 0 0
  • 你离开的城市,就像失去灯塔的海洋。 我在这孤独的城市中飘荡,寻找着你的身影。 不变的是风景,只是看的人不同了。
    尽管如此世界美丽阅读 230评论 0 0