一千萬個為什麽

搜索

javascript:在LINK上捕獲加載事件

我正在嘗試將事件處理程序附加到鏈接標記的加載事件,以在加載樣式表後執行某些代碼。

new_element = document.createElement('link');
new_element.type = 'text/css';
new_element.rel = 'stylesheet';
new_element.href = 'http://domain.tld/file.css';
new_element.addEventListener('load', function() { alert('foo'); }, false);
document.getElementsByTagName('head')[0].appendChild(new_element)

我也嘗試過onreadystatechange

new_element.onreadystatechange = function() { alert('foo'); }

不幸的是,這兩種方法都沒有導致觸發警報。 此外,使用addEventListener註冊'load'事件的處理程序後,new_element.onload為null。這是正常的嗎?

謝謝, 安德魯

ps:我可能不會使用任何框架來解決這個問題

最佳答案

在我看來,對於使用IMG標記及其onerror事件的此問題,這是一個更好的解決方案。這個方法可以完成工作而不需要循環,進行扭曲的樣式遵守,或者在iframe中加載文件等。這個解決方案在文件加載時正確激活,如果文件已經被緩存,則立即激活(具有諷刺意味的是比大多數DOM更好)加載事件處理緩存資產)。這是我博客上的一篇文章,解釋了該方法 - Back Alley Coder帖子 - 我厭倦了沒有合法的解決方案,享受!

var loadCSS = function(url, callback){
    var link = document.createElement('link');
        link.type = 'text/css';
        link.rel = 'stylesheet';
        link.href = url;

    document.getElementsByTagName('head')[0].appendChild(link);

    var img = document.createElement('img');
        img.onerror = function(){
            if(callback) callback(link);
        }
        img.src = url;
}

轉載註明原文: javascript:在LINK上捕獲加載事件