загрузка элемента ссылки - PullRequest
Новая
       20

загрузка элемента ссылки

38 голосов
/ 20 июня 2010

Есть ли способ прослушать событие onload для элемента <link>?

f.ex: 

var link = document.createElement('link');
link.rel = 'stylesheet';
link.href = 'styles.css';

link.onload = link.onreadystatechange = function(e) {
    console.log(e);
};

Это работает для <script> элементов, но не <link>. Есть ли другой способ? Мне просто нужно знать, когда стили из внешней таблицы стилей применяются к DOM.

Обновление:

Будет ли идея добавить скрытый <iframe>, добавить <link> в голову и прослушать событие window.onload в iframe? Он должен срабатывать при загрузке css, но может не гарантировать, что он загружен в верхнем окне ...

Ответы [ 11 ]

0 голосов
/ 29 июня 2010

Вам либо нужен определенный элемент, стиль которого вы знаете, либо, если вы управляете файлом CSS, вы можете вставить для этого фиктивный элемент. Этот код точно запустит ваш обратный вызов, когда содержимое файла CSS будет применено к DOM. 

// dummy element in the html
<div id="cssloaded"></div>

// dummy element in the css
#cssloaded { height:1px; }

// event handler function
function cssOnload(id, callback) {
  setTimeout(function listener(){
    var el = document.getElementById(id),
        comp = el.currentStyle || getComputedStyle(el, null);
    if ( comp.height === "1px" )
      callback();
    else
      setTimeout(listener, 50);
  }, 50)
}

// attach an onload handler
cssOnload("cssloaded", function(){ 
  alert("ok"); 
});

Если вы используете этот код в нижней части документа, вы можете переместить переменные el и comp вне таймера, чтобы получить элемент один раз. Но если вы хотите прикрепить обработчик где-нибудь в документе (например, к заголовку), вы должны оставить код как есть.

Примечание: проверено на FF 3+, IE 5.5+, Chrome

Страница:
...