document.ready 与 onload 的区别
摘要
document.ready 是指文档加载好, dom 加载好,仅包含在它之前的 script 、css 标签 , 但不包含 img 标签是否加载完成, 因为页面是按顺序执行的。
onload 是指页面完全加载好,包括所有节点,甚至 img 标签
当然我们编码一般都是把基础库放在head 头部,保证最先加载,业务代码放在最后,避免出现库未加载完成的情况。
当然现在前端工程一般使用 webpack 等打包技术,在编译打包过程中就完全实现了依赖项前置的功能。
测试
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="onload()">
<img src="http://upload.chinaz.com/upimg/allimg/110630/0901070.jpg" />
<script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
console.log('document ready');
});
</script>
<script type="text/javascript">
console.log('haha');
</script>
</body>
<script type="text/javascript">
function onload() {
console.log('onload');
}
</script>
</html>
// 打印
//haha
//document ready
//onload
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="onload()">
<img src="http://upload.chinaz.com/upimg/allimg/110630/0901070.jpg" />
<script type="text/javascript">
$(document).ready(function() {
console.log('document ready');
});
</script>
<script type="text/javascript">
console.log('haha');
</script>
<script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.2.1/jquery.min.js"></script>
</body>
<script type="text/javascript">
function onload() {
console.log('onload');
}
</script>
</html>
//打印
//$ undefined
//haha
//onload
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body onload="onload()">
<img src="http://upload.chinaz.com/upimg/allimg/110630/0901070.jpg" />
<script type="text/javascript">
console.log('haha');
</script>
<script type="text/javascript">
$(document).ready(function() {
console.log('document ready');
});
</script>
<script type="text/javascript" src="http://libs.cdnjs.net/jquery/3.2.1/jquery.min.js"></script>
</body>
<script type="text/javascript">
function onload() {
console.log('onload');
}
</script>
</html>
//打印
//haha
//$ undefined
//onload
计划、执行、每天高效的活着学着