1. 程式人生 > >深入理解js中的載入事件

深入理解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事件

  1. 判斷css是否載入完畢:

    這裡寫圖片描述
    這裡寫圖片描述

  2. 判斷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. (document).ready(handler)2.().ready(handler)
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)