document.ready 与 onload 的区别

最新推荐文章于 2023-12-07 21:59:32 发布

bo o ya ka

最新推荐文章于 2023-12-07 21:59:32 发布

阅读量183

点赞数

文章标签：前端 webpack javascript ViewUI

原文链接：http://www.cnblogs.com/huxiaoyun90/p/8887546.html

版权

摘要

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

转载于:https://www.cnblogs.com/huxiaoyun90/p/8887546.html

bo o ya ka

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
document.ready 与 onload 的区别

摘要document.ready 是指文档加载好, dom 加载好，仅包含在它之前的 script 、css 标签，但不包含 img 标签是否加载完成，因为页面是按顺序执行的。onload 是指页面完全加载好，包括所有节点，甚至 img 标签当然我们编码一般都是把基础库放在head 头部，保证最先加载，业务代码放在最后，避免出现库未加载完成的情况。当然现在前端工程一般使用 webpa...
复制链接

扫一扫