JavaScript的window.load小記

時間 2019-11-08

標籤 javascript window.load window load 欄目 JavaScript 简体版

原文原文鏈接

load事件一般用於檢測文檔內容或者圖片是否加載完畢。javascript

本文着重介紹註冊在window對象上load事件，也就是window.onload事件。css

關於事件處理函數註冊，能夠參閱如何註冊事件處理函數一章節。html

瀏覽器支持:java

（1）.IE瀏覽器支持此事件。瀏覽器

（2）.edge瀏覽器支持此事件。函數

（3）.火狐瀏覽器支持此事件。spa

（4）.Opera瀏覽器支持此事件。code

（5）.谷歌瀏覽器支持此事件。htm

（6）.safria瀏覽器支持此事件。對象

網頁中的某些JavaScript腳本代碼每每須要在文檔加載完成後纔可以去執行，不然可能致使沒法獲取對象的狀況，爲了不相似狀況的發生，可使用如下兩種方式:

（1）.將腳本代碼放在網頁的底端，運行腳本代碼的時候，能夠確保要操做的對象已經加載完成。

（2）.經過window.onload來執行腳本代碼。

第一種方式感受比較凌亂（其實推薦使用），咱們一般須要將腳本代碼放在一個更爲合適的地方，window.onload方式將是一個良好的選擇。window.onload是一個事件，當文檔內容徹底加載完成會觸發該事件。能夠爲此事件註冊事件處理函數，並將要執行的腳本代碼放在事件處理函數中，因而就能夠避免獲取不到對象的狀況。

先看一段代碼實例:

[HTML] 純文本查看 複製代碼運行代碼

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>螞蟻部落</title>

<style type="text/css">

#bg{

width:100px;

height:100px;

border:2px solid red;

}

</style>

<script type="text/javascript">

document.getElementById("bg").style.backgroundColor="#F90";

</script>

</head>

<body>

<div id="bg"></div>

</body>

</html>

代碼的初衷是將div的背景顏色設置爲#F90，可是並無實現此效果，由於代碼是順序執行的，當執行到document.getElementById("#bg").style.backgroundColor="#F90"的時候，尚未加載到此div對象，因此設置也就不可以成功。代碼修改以下:

[HTML] 純文本查看 複製代碼運行代碼

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>螞蟻部落</title>

<style type="text/css">

#bg{

width:100px;

height:100px;

border:2px solid red;

}

</style>

<script type="text/javascript">

window.onload=function(){

document.getElementById("bg").style.backgroundColor="#F90";

}

</script>

</head>

<body>

<div id="bg"></div>

</body>

</html>

代碼完成將div背景顏色設置爲#F90，將設置背景顏色的代碼放置在window.onload的事件處理函數中，當文檔加載完成後，纔會執行事件處理函數，保證文檔已經加載完成。

事件處理函數綁定:

（1）.window.onload=function(){}：

前面的代碼就是使用此種方式爲window.onload事件綁定事件處理函數，綁定的是一個匿名函數，固然也能夠綁定具名函數，代碼實例以下:

[HTML] 純文本查看 複製代碼運行代碼

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>螞蟻部落</title>

<script type="text/javascript">

window.onload=function myalert(){

alert("綁定成功！");

}

</script>

</head>

<body>

</body>

</html>

不能以如下方式爲此事件綁定多個事件處理函數：

[JavaScript] 純文本查看 複製代碼

1 2	`window.onload=function` `a(){}` `window.onload=function` `b(){}`

上代碼不能爲window.onload事件綁定多個事件處理函數，最後一個會覆蓋前面的全部函數。

代碼能夠變通一下:

[HTML] 純文本查看 複製代碼運行代碼

<!DOCTYPE html>

<html>

<head>

<meta charset=" utf-8">

<meta name="author" content="http://www.softwhy.com/" />

<title>螞蟻部落</title>

<style type="text/css">

#bg{

width:100px;

height:100px;

border:2px solid red;

}

</style>

<script type="text/javascript">

window.onload=function(){

function a(){

document.getElementById("bg").style.backgroundColor="#F90";

}

function b(){

document.getElementById("bg").style.width="200px";

}

a();

b();

}

</script>

</head>

<body>

<div id="bg"></div>

</body>

</html>

（2）.addEventListener()和attachEvent():

關於這兩種方式能夠參閱JavaScript addEventListener()一章節。

下面再看一個爲Image圖片對象註冊load事件處理函數的代碼。

[JavaScript] 純文本查看 複製代碼

var img=new Image();

img.onload=function(){

var iheight=img.height;

var iwidth=img.width;

alert(iwidth);

};

img.src="delete.gif";

若是圖片加載完畢，那麼就會觸發load事件。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。