load和DOMContentLoaded的区别

发表于 | 分类于

今天看到一个面试题：

$(function(){console.log(1)}); 和 window.onload = function(){console.log(2)};输出结果

答案：

1
先输出1，再输出2

这一题考察的就是原生js中的load和DOMContentLoaded的区别。那么它们的区别是什么？

1
2
3
4
5
6
7
8
window.addEventListener('load',function(){
    // 页面的全部资源加载完才执行，包括图片，视频等
})


document.addEventListener('DOMContentLoaded',function(){
    //DOM渲染完即可执行，此时图片，视频还可能没有加载完
});

对应的它们在jQuery中的写法为：

1
2
3
4
5
6
7
8
9
// DOMContentLoaded
$(document).ready(function() {
    // ...代码...
});

//load
$(document).load(function() {
    // ...代码...
});