JS判断加载完毕事件onload的使用方法

定义:

onload是当页面载入完毕后执行的Javascript事件代码
onload 事件会在页面或图像加载完成后立即发生
onload 事件适用于所有浏览器

在HTML中的用法

在HTML中 onload 通常用于 元素,在页面完全载入后(包括图片、css文件等等。)执行脚本代码

<body onload="SomeJavaScriptCode">

在JavaScript中的用法

在 script 标签中 onload 通常用于判断某个DOM元素是否加载完毕
页面加载完毕事件:

window.onload=function(){SomeJavaScriptCode};

图片加载完毕事件 例子:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
</head>
<body>
	<img src="/bbf471a0aebb3190709e9a58e3e17e51.jpg" id="image">
	<p id="p"></p>
</body>
<script>
var image = document.getElementById('image');
var p = document.getElementById('p');
image.onload = function(){
	p.innerHTML = 'loaded';
}
</script>
</html>

支持使用onload的HTML标签

<body>, <frame>, <frameset>, <iframe>, <img>, <input type="image">, <link>, <script>, <style>

风影OvO

风影OvO, 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA 4.0协议进行授权 | 转载请注明原文链接

留下你的评论

*评论支持代码高亮<pre class="prettyprint linenums">代码</pre>

相关推荐