网页状态事件

1. load
2. DOMContentLoaded 事件
3. readystatechange 事件

Load事件

资源加载完成之后触发，包含DOM和图片等资源都加载完成后，才会触发load

xxxxxxxxxx
var image = new Image();
image.src = "http://iwenwiki.com/banner1.png"
image.onload = function(){
    console.log("图片的资源加载完成了");
    document.body.appendChild(image);
}

DOMContentLoaded 事件

网页下载并解析完成以后，浏览器就会在document对象上触发 DOMContentLoaded 事件。这时，仅仅完成了网页的解析（整张页面的 DOM 生成了），所有外部资源（样式表、脚本、iframe 等等）可能还没有下载结束。也就是说，这个事件比load事件，发生时间早得多

xxxxxxxxxx
document.addEventListener('DOMContentLoaded', function (event) {
  console.log('DOM生成');
});

readystatechange 事件

此事件我们会放在网络请求部分讲解

实时效果反馈

1. 下列代码，等待图片资源加载完成，划横线处应该填写代码是：

xxxxxxxxxx
var image = new Image();
image.src = "http://iwenwiki.com/banner1.png"
image.___ = function(){
    console.log("图片的资源加载完成了");
    document.body.appendChild(image);
}

A onclick

B oninput

C onfocus

D onload

答案

1=>D