onload事件和ready方法的区别

       部分内容转载自ready和onload的区别

       $(document).ready()和window.onload在表面上看都是页面加载时我们就去执行一个函数或动作,但是在

具体的细节上$(document) ready()和window onload还是有区别的。

1.执行时间

  window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。 

  $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕。

      可以这样理解记忆:Document对象是Window对象的一个属性,所以Window对象所需加载的时间比Document对象要长。

2.编写个数不同

  window.onload不能同时编写多个,如果有多个window.onload方法,只会执行一个 (因为一个对象)

  $(document).ready()可以同时编写多个,并且都可以得到执行


       举个例子:我们需要为body添加一个<h1>元素,要等到所有的页面资源加载完毕后才能执行代码,这样我们就要利用DOM的window.onload事件,而不能使用ready()方法。

        如下所示:

        $(window).onload(function(){

                $('body').append('<h1>hello world</h1>');

        });

        它们还有以下形式的变化:

       window.onload == $("window").load(function(){});

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

猜你喜欢

转载自blog.csdn.net/xc917563264/article/details/80639568