$.(fn) vs document.body.onload vs window.onload

最新推荐文章于 2025-08-29 08:00:00 发布

原创最新推荐文章于 2025-08-29 08:00:00 发布 · 405 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#onload #unload #window #jquery #页面加载

前端/Javascript 专栏收录该内容

45 篇文章

订阅专栏

本文探讨了在不同资源加载条件下，jQuery的$(document).ready()与window.onload及body.onload事件触发的先后顺序。揭示了资源加载对事件触发时机的影响，并解释了重复定义onload事件的行为。

在一个没有图片，音乐，flash资源，只有寥寥几个tag的网页的< /body>前，加上如下代码，想看看alert的先后

      $(document).ready(function(){
        alert('ready')
      })
        window.onload=function(){
          alert('window loaded')
        }
        document.body.onload=function(){
          alert('load body')
        }

结果是先出来了load body，然后才是ready
加了一个外网的iframe，结果则是先ready后load body.
调换了window和body的位置，结果变成了出来window load 和 ready ，body出不来了。

这是一个合理的解释：

$虽然\$.(document).ready()指的是DomContentsLoaded, 但本身jquery文件的加载（刚才是放在head头里的了）也是需要时间的。当DOM节点中没有需要长时间加载的资源时，速度是很快的，ready事件和window.onload,body.onload事件几乎同时，所以可能出现这样的情况，如果在ready 事件中写window.onload，还有可能导致window.onload出不来，但如果有需要长时间加载的资源，那就必定存在先ready后onload的时间差。$

$此外，onload事件不能引用多次，可以把所有代码都放在一个大function里赋给它，但不能写多个window.onload=function(){} 。不会报错，但只会执行最后一个。当body.onload和window.onload共存时，他俩之间也不存在时间差，因此也是谁在后面执行谁。$

$插一点题外话，jquery3.0之后取消了.load方法，可以用.on()来代替。$

//load可以用，而且可以用的就这个，唯一的 
      $(window).on('unload',function(){
          alert('window unloaded')
        })

//unload会被block， 可能是浏览器行为
   $(window).on('unload',function(){
          alert('window unloaded')
        })

//body的load没用，不会报错但是没任何效果
        // $('body').on('unload',function(){
        //   alert('load body')
        // })