欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-03-03 20:15:19
...

Jquery中$(document).ready()的作用类似于传统JavaScript中的window.onload方法,不过与window.onload方法还是有区别的。

1.执行时间 

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

2.编写个数不同

         window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个
         $(document).ready()可以同时编写多个,并且都可以得到执行

3.简化写法

         window.onload没有简化写法
         $(document).ready(function(){})可以简写成$(function(){});


复制代码代码如下:

$(document).ready(function(){
...
});

这个时候,不一定要等所有的js和图片加载完毕,就可以执行一些方法,不过有些时候,必须要等所有的

元素都加载完毕,才可以执行一些方法的时候,比如说,部分图片或者什么其他方面还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就


复制代码代码如下:

$(window).load(function() {
$("#btn-upload").click(function(){   //比如说:
uploadPhotos();
});
});

 

 

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

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

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

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

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

 

window.onload和$(document).ready()
            
    
    博客分类: web前端 onload 
     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();
            }
        }
window.onload和$(document).ready()
            
    
    博客分类: web前端 onload 

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

window.onload和$(document).ready()
            
    
    博客分类: web前端 onload 
   window.onload = function () {
            alert('onload');

        };

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

        });
window.onload和$(document).ready()
            
    
    博客分类: web前端 onload 

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

 

1、是onload,不是onLoad。
2、没有document.onload,只有window.onload。
3、是window.onload=myFunction,而不是window.onload=myFunction()如果写成后者,执行到此处的时候,会先计算一下myFunction()的返回值是多少,再传递给window.onload。只有写成前者,将myFunction这个函数指向window.onload(类似C语言中的指针变量)。

相关标签: onload