js中的onload – 源码巴士

js中的onload事件，有两种写法。

1.放在body中

<script>
function load()
{
alert("页面已加载！");
}
</script>
</head>

<body οnlοad="load()">
<h1>Hello World!</h1>
</body>

意思上当body标签加载完毕之后，执行onload后面gender那个load函数。

2.放在script标签中。

    <script>
        //onload 当页面加载完毕 执行, 页面的标签创建完成并且页面依赖的外部文件都下载完毕
        window.onload = function () {
           。。。。。。
        }
    </script>

看上面注释，说的很清楚，这里所依赖的外部文件，指的是css,js,图片的src。为了进一步说明其实用性，引入下面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <img id="img" src="......" />     /*自己测试时候，引入具体的路径，或者本地，或者网络*/


    <script>
        var img = document.getElementById("img");
        console.log(img.width);


    </script>
</body>
</html>

打开页面后，在控制台中可以看到console.log(img.width)的执行结果，为0。其为0的基本原因是，执行到<img id="img" src="......" /> 时候，不会去加载src,就去执行console.log(img.width).然后去加载相应js,css,(我们这个小案例中并没有）src，加载完毕src,才能靠src的内容，把img标签撑起来。我们如果要想立马获得img.width。就可以把代码改造为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //onload 当页面加载完毕 执行, 页面的标签创建完成并且页面依赖的外部文件都下载完毕
        window.onload = function () {
            var img = document.getElementById("img");
            console.log(img.width);
        }
    </script>
</head>
<body>
    <img id="img" src="....." />

    </script>
</body>
</html>

原文链接：https://blog.csdn.net/guangbing8877/article/details/53148565