深入理解js中的載入事件
load
load事件:當頁面完全載入後(包括所有圖片、javascript檔案、css檔案等外部資源),就會觸發window上的load事件
window.onload = function(e) {
e = e || event;
var target = e.target || e.srcElement;
console.log(target);
}
IE中輸出:
chrome中輸出:
load事件不僅發生在document物件,還發生在各種外部資源上面。瀏覽網頁就是一個載入各種資源的過程,圖片、樣式表、指令碼、視訊、音訊、ajax請求等到。這些資源和document物件、window物件、XMLHttpRequestUpload物件,都會觸發load事件
如果頁面從瀏覽器快取載入,並不會觸發load事件
圖片和框架iframe也可以觸發load事件
判斷css是否載入完畢:
判斷img載入
要在指定影象的src屬性之前先指定事件,影象是從設定了src屬性之後開始下載
var img = new Image();
img.onload = function(){
document.body.appendChild(img)
}
img.src = './image/mission.jpg'
3 . 判斷框架iframe載入
<iframe id="test" src="http://cnblogs.com" frameborder="0"></iframe>
<script >
test.onload = function(){
console.log(666);
}
</script>
4 . script,與圖片不同,只有在設定了script元素的src屬性並將該元素新增到文件後,才會開始下載js檔案,即指定src屬性和指定事件處理程式的先後順序不重要
error
以load相反,error事件是載入失敗時觸發,凡是可以觸發load事件的元素,都可以觸發error事件
任何沒有通過try-catch處理的錯誤都會觸發window物件的error事件
error事件可以接收三個引數:錯誤訊息、錯誤所在的URL和行號。多數情況下,只有錯誤訊息有用,因為URL只是給出了文件的位置,而行號所指的程式碼行既可能出自嵌入的javascript程式碼,也可能出自外部的檔案
//方法1
window.onerror = function(message,url,line){
alert(message);
}
//方法2
window.addEventListener("error",function(message,url,line){
alert(message);
});
影象也支援error事件。只要影象的src特性中的URL不能返回可以被識別的影象格式,就會觸發error事件。此時的error事件遵循DOM格式,會返回一個以影象為目標的event物件
發生error事件時,影象下載過程已經結束,也就是不能再重新下載了。但是,可以在error事件中,重新設定影象的src屬性,指向備用影象的地址
var image = new Image();
document.body.appendChild(image);
image.onerror = function(e){
image.src = 'smileBackup.gif';
}
image.src = 'smilex.gif';
abort
元素載入中止時,(如載入過程中按下ESC鍵,停止載入),觸發該事件,常用於圖片載入
//只有IE瀏覽器支援
var image = new Image();
image.onabort = function(){
console.log(111);
}
document.body.appendChild(image);
image.src = './image/img.jpg';
unload
與load事件對應的是unload事件,該事件在文件被完全解除安裝後觸發。一般地,在重新整理頁面時,會觸發該事件
chrome/firefox/safari瀏覽器會阻止alert等對話方塊,IE瀏覽器會阻止console.log()等控制檯顯示
window.onunload = function(e){
//chrome報錯,firefox靜默失敗,IE彈出666
alert(666);
}
window.onunload = function(e){
//chrome和firefox控制檯顯示666,IE靜默失敗
console.log(666);
}
beforeunload
beforeunload事件在關閉網頁或重新整理網頁時觸發。它一般地用來防止使用者不小心關閉網頁
window.onbeforeunload = function(e){
e = e || event;
//IE瀏覽器顯示指定文字,其他瀏覽器顯示預設文字
e.returnValue = '要離開嗎?';
}
DOMContentLoaded(jquery的$(document).ready事件)
下面三個寫法是等價的:
1.
3. $(handler)
window的onload事件會在頁面中的一切資源都載入完畢時觸發,但這個過程可能因為要載入的外部資源過多而頗費周折。而DOMContentLoaded事件則在形成完整的DOM樹之後就會觸發,而不理會影象、javascript檔案,css檔案或其他資源是否下載完畢,與load事件不同,DOMContentLoaded支援在頁面下載的早期新增事件處理程式,即使用者可以儘早地與頁面進行互動
網頁的js指令碼是同步執行的,所以定義DOMContentLoaded事件的監聽函式,應該放在所有指令碼的最前面,否則指令碼一旦發生堵塞,將推遲觸發DOMContentLoaded事件
要處理該事件,可以為document或window新增響應的事件處理程式,儘管這個事件會冒泡到window,但它的目標實際是document
//IE8不支援
window.addEventListener('DOMContentLoaded',function(e){
console.log(1);
}
對於不支援該事件的IE8,可以在頁面載入期間設定一個時間為0毫秒的超時呼叫,且必須作為頁面的第一個超時呼叫
`
setTimeout(function(){
console.log(1);
},0)