load事件

向右看齐 2022-11-29 13:26 137阅读 0赞

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

### window： ###

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

![20200821204133651.png][]

### img图像： ###

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70][]

**动态创建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事件！）

与图像不同，只有在设置了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>元素添加到文档之前也不会开始下载样式表。**

[20200821204133651.png]: /images/20221124/95386873d5724ab8aa06837f08e6eb84.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzc4MDAx_size_16_color_FFFFFF_t_70]: /images/20221124/20c5ede2e68e46b78f0d19f7c4abe8b7.png