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

 在做itoo项目中,碰到一个问题就是有个js中的方法始终是执行不到,原因就是该方法放在了window.onload()下,而又由于页面加载不完的原因,导致该方法始终执行不到。

       所以改用了$(document).ready(),这个方法和window.onload()有什么区别呢?

       1.两个方法执行的时间是不一样的

            window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 
            $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

            假如用window.onload,页面上的js有个报错或者找不到图片等资源,就会一直等着。

        2.两个方法重复执行的问题

             window.onload只能执行一次,假如写了多个该方法只执行最后的一个。

             $(document).ready()可以写多个,执行顺序是按照编写的顺序进行执行。

            如果两个方法都写了,那么 $(document).ready()是比window.onload要先执行的。


        原生js中是没有ready方法的,如果不想引用jQuery,则可以自己创建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('onreadytstatechange', function () {
                      if (document.readyState == "complete") {
                                document.detachEvent("onreadystatechange", arguments.callee);
                                callback();
                       }
                })
            }
            else if (document.lastChild == document.body) {
                callback();
            }
        }


  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
评论 6
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值