1. 程式人生 > >關於HTML中link元素的onload屬性總結

關於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的。