элемент ссылки onload
Должен там так или иначе слушать onload событие для a <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 загружается, но это не могло бы гарантировать, что загружается в главном окне...
4 ответа
Это своего рода хак, но если вы можете редактировать CSS, вы можете добавить специальный стиль (без видимого эффекта), который вы можете прослушать, используя технику в этом посте: http://www.west-wind.com/weblog/posts/478985.aspx
Вам понадобится элемент на странице, имеющий класс или id, на который будет влиять CSS. Когда ваш код обнаружит, что его стиль изменился, значит, CSS был загружен.
Хак, как я уже сказал :)
Поскольку вам не понравился мой хак :) Я поискал другой способ и нашел один от brothercake.
В основном, предлагается получить CSS с помощью AJAX, чтобы браузер закешировал его, а затем рассматривать загрузку ссылки как мгновенную, поскольку CSS закеширован. Возможно, это будет работать не каждый раз (поскольку в некоторых браузерах кэш может быть отключен, например), но почти всегда.
Этот трюк заимствован из плагина jQuery xLazyLoader :
var count = 0;
(function(){
try {
link.sheet.cssRules;
} catch (e) {
if(count++ < 100)
cssTimeout = setTimeout(arguments.callee, 20);
else
console.log('load failed (FF)');
return;
};
if(link.sheet.cssRules && link.sheet.cssRules.length == 0) // fail in chrome?
console.log('load failed (Webkit)');
else
console.log('loaded');
})();
Протестировано и работает локально в FF (3.6.3) и Chrome (linux - 6.0.408.1 dev)
Демо здесь (обратите внимание, что это не будет работать для межсайтовой загрузки CSS, как это сделано в демонстрации, в FF)
Вам либо нужен определенный элемент, стиль которого вы знаете, либо если вы управляете 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