浏览器load事件会等待哪些资源加载完毕才会触发？

Question

示例代码如下：

<script>
  window.onload = function() {
     console.log('html load')
  }
</script>

<script>
  setTimeout(function () {
    var img = document.createElement('img')
    img.src = 'http://krspace.cn/images/header.9eac16910557e285bee0ad69b94ca1df.png'
    img.onload = function () {
      console.log('img load')
    }
    document.body.appendChild(img)
  }, 0)
</script>

控制台输出不稳定：

有时候 html load 在 img load 之前，有时候在其之后

所以，我想问：浏览器什么情况下才把资源纳入为 load 事件触发等待的资源？

Answer 1

window.onload 是页面所有资源加载完后才执行.
你上面的img是通过js插入的.并不是原html文档中包含的img.
所以window.onload不会将这个img给算进去.

Answer 2

window.onload需要等待图片、视频等资源加载完成才执行后面的JS代码，$(function(){})只要DOM加载完成后就开始执行JS代码

Answer 3

你这样就相当是两个js执行顺序的问题了