Необходимо судить, загружен ли этот файл CSS, и практика каждого браузера относительно большой.
Код кода копирования следующим образом:
// кодовый фестиваль для Seajs
Function styleonload (Node, Callback) {
// для IE6-9 и Opera
if (node.attachevent) {
node.attachevent ('только', обратный вызов);
// уведомление:
// 1.
// Эта ситуация, опера ничего не делает, так что отступление на тайм -аут.
// 2.
}
}
К сожалению, на этот раз в других браузерах не так удобно судить, загружается ли CSS. И вам нужно использовать интервальное событие SetTimeout:
Код кода копирования следующим образом:
// кодовый фестиваль для Seajs
Функциональный опрос (узел, обратный вызов) {
if (callback.iscalled) {
Возвращаться;
}
var Isloaded = false;
if (/webkit/i.test tost tost.com)) {// webkit
if (node ['лист']) {
iSladed = true;
}
}
// для Firefox
else if (node ['sheet']) {
пытаться {
if (node ['лист']. cssrules) {
iSladed = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
iSladed = true;
}
}
}
if (ISloaded) {
// дайте время рендерингу.
settimeout (function () {
перезвонить ();
}, 1);
}
еще {
settimeout (function () {
Опрос (узел, обратный вызов);
}, 1);
}
}
settimeout (function () {
Опрос (узел, обратный вызов);
}, 0);
Полная обработка, данная SeaJS, заключается в следующем:
Код кода копирования следующим образом:
Function styleonload (Node, Callback) {
// для IE6-9 и Opera
if (node.attachevent) {
node.attachevent ('только', обратный вызов);
// уведомление:
// 1.
// Эта ситуация, опера ничего не делает, так что отступление на тайм -аут.
// 2.
}
// Опрос для Firefox, Chrome, Safari
еще {
settimeout (function () {
Опрос (узел, обратный вызов);
}, 0);
}
}
Функциональный опрос (узел, обратный вызов) {
if (callback.iscalled) {
Возвращаться;
}
var Isloaded = false;
if (/webkit/i.test tost tost.com)) {// webkit
if (node ['лист']) {
iSladed = true;
}
}
// для Firefox
else if (node ['sheet']) {
пытаться {
if (node ['лист']. cssrules) {
iSladed = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
iSladed = true;
}
}
}
if (ISloaded) {
// дайте время рендерингу.
settimeout (function () {
перезвонить ();
}, 1);
}
еще {
settimeout (function () {
Опрос (узел, обратный вызов);
}, 1);
}
}
// моя функция ссылки на динамическое создание
Функция CreateLink (CSSURL, LNKID, Charset, Media) {{{
var head = document.getelementsbytagname ('head') [0],
linktag = null;
if (! cssurl) {
Вернуть ложь;
}
linktag = document.createElement ('link');
linktag.setattribute ('id', (lnkid || 'dynamic-style'));
linktag.setattribute ('rel', 'stylesheet');
linktag.setattribute ('charset', (charset || 'utf-8'));
linktag.setattribute ('Media', (Media || 'All'));
linktag.setattribute ('type', 'text/css');
linktag.href = cssurl;
Head.AppendChild (Linktag);
}
function LoadCss () {
Var stylenode = createLink ('/wp-content/themes/bluenight/style.css');
Styleonload (styleenode, function () {) {
оповещение («загружен»);
});
}
Когда я увидел Кодекс Сидж, я сразу же вспомнил другое решение, которое я увидел Диего Перини:
Код кода копирования следующим образом:
/*
* Copyright (C) 2010 Diego Perini
* Все права защищены.
*
* cssream.js -css Загружено/готовое состояние состояния
*
* Автор: Диего Перини <diego.perini at gmail com>
* Версия: 0.1
* Создано: 20100616
* Выпуск: 20101104
*
* Лицензия:
* //www.vevb.com * Скачать:
* http://javascript.nwbox.com/cssream/cssream.js
*/
Функция cssream (fn, link) {
var d = документ,
T = D.CreatestyLesseSheephy,
r = t?
S = T?
l = D.GetElementsByTagName ('link');
// передаваем
Ссылка ||.
функция проверка () {
пытаться {
Return link && link [s] && link [s] [r] && link [s] [r] [0];
} catch (e) {
Вернуть ложь;
}
}
(Функция опроса () {) {
check () && settimeout (fn, 0) || settimeout (опрос, 100);
}) ();
}
На самом деле, если вы прочитали Кодекс суждения о событии JQUERY DOMREAM, принцип аналогичен. Также определяется, загружается ли узел DOM через запрос SetTimeout.
Кроме того, FackBook содержит фиксированный стиль через динамический стиль CSS, такой как#LoadCsSdom, а LoadCsSdom - это высота стиля 1PX. Затем динамически создайте объект DOM, добавьте этот стиль LoadCssdom. Затем SetTimeout спросил, имеет ли LoadCSSDO высоту 1PX. Для решения этого метода обработки вы можете включить «CSSP: загрузка CSS с помощью JavaScript и получение онлайн -обратного вызова».
Автор "JavaScript Patterns" Стоян в своем блоге подробно объяснил «Когда действительно загружена таблица стилей?».
После просмотра этого вы можете вздохнуть: Хан, судя о том, загружен ли CSS не так просто! На самом деле, My Here -это купитель, потому что в разработке, в дополнение к динамической загрузке CSS, мы также должны динамически загружать операцию JavaScript и динамически загружать HTML -операции. , но до этого я предлагаю посмотреть на это:
«Убедитесь, что JavaScripts/HTML/CSS загружаются по требованию при необходимости»,-эта библиотека специально обрабатывается с помощью динамической загрузки HTML, CSScript. Как представил автор:
Убедитесь, что крошечная библиотека JavaScript, которая обрабатывает удобную функцию, гарантируйте, что все.
"Скажите CSS, что JavavaScript доступен как можно скорее"
После просмотра этого, возможно, вы не запутались: когда вы стили, части веб -страницы, которые будут выглядеть и работать по -разному, доступен ли JavaScript или нет.
Ну, я так много сказал на этот раз, я надеюсь, что это будет полезно для развития и обучения каждого!