關於HTML中link元素的onload屬性總結
我們知道,HTML為了載入一個外部的css檔案,經常會用到一個link的元素,具體的用法如下:
<link rel="stylesheet" rev="stylesheet" href="xxx.css" type="text/css" media="screen" />
並且瀏覽器對css的載入是阻塞式的下載,在對應的外部css檔案沒有load完之前,下面的parse將會被阻塞住,但我們會發現,在部分的
頁面有類似這樣的用法:
<link rel="stylesheet" rev="stylesheet" href="xxx.css" type="text/css" media="screen" onload="javascript:alert('onload link done')"/>
經tenfy在IE,firefox,opera,chrome,safari下測試,發現:
一,link元素的onload屬性在IE和opera下均支援,目的是為了提供使用者一個css載入完畢後的回撥處理介面。
但發現IE和opera再回調次數是不一樣的,IE下,如果對應的css有import其他的css檔案,會導致多次呼叫onload,
測試中發現,css裡面即使是多次import,IE也只會回撥onload兩次,而不是每import一次就多呼叫一次onload,比較有意思!
而opera只會呼叫一次onload方法。
二,firefox,chrome和safari的link不支援onload屬性。
三,onload屬性本身不是xhml的標準屬性
四,即使IE和opera均有onload屬性,但其對css檔案的載入仍然是阻塞式下載的,所以我們對css載入時間的測試,都可以放到css檔案的後面執行指令碼採集也是ok的。