load事件

javaScript中最常用到的一个事件就是load。当页面完全加载后（包括所有图像、javaScript文件、css文件等外部资源），就会触发window上边的load事件。

window：

window.addEventListener('load', function(e) {
    console.log('页面完全加载完毕！')
}, false)

img图像：

图像上也可以触发load事件。

我们可以在图片加载完毕后做一些事情：

<img src="./1.jpg" alt="图片">
<script>
let img = document.getElementsByTagName('img')[0]
img.onload = function(e) {
    console.log('图片已经加载完毕！')
}
</script>

动态创建img：

1> 在指定src属性之前，必须先指定事件（如下原因参考3>）

2> 下边之所以要为window指定onload事件，原因在于，我们是想向DOM中添加一个新元素，所以必须确定页面已经加载完毕，如果在页面加载前操作document.body会导致错误。

3> 新图片不一定从添加到文档之后再开始下载，而是只要设置了src属性就会开始下载（所以通常把img.src = 'xxx'放到最后）。

window.onload = function() {
    let img = document.createElement('img')
    img.onload = function() {
        console.log('图片加载完毕！！！1')
    }
    document.body.appendChild(img)
    img.src = '1.jpg'
}

动态创建script元素

（注：IE8及以下不支持script上的load事件！）

<script> 元素也会触发load事件，以便开发人员好确定动态加载的JavaScipt文件是否加载完毕。

与图像不同，只有在设置了src属性和将该元素插入到文档之后，才会下载js文件，所以src属性和绑定的事件的先后顺序，已经不重要了！！！

下边1.js文件加载完毕之后会弹出窗口。。。

let script = document.createElement('script')
script.addEventListener('load', function() {
    alert('script创建完毕')
})
script.src = '1.js'
document.body.append(script)

动态创建link元素：

这里不说了，用法与script一样，如果未指定href和未将<link>元素添加到文档之前也不会开始下载样式表。