js中的onload

来源：互联网发布：mac无损播放器编辑：程序博客网时间：2024/05/22 15:21

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

1.放在body中

<script>function load(){alert("页面已加载！");}</script></head><body onload="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>

0 0