이 CSS 파일이로드되었는지 여부를 판단해야하며, 이번에는 각 브라우저의 관행이 비교적 크다.
다음과 같이 코드 코드를 복사하십시오.
// Seajs에 대한 코드 축제
함수 styleonload (노드, 콜백) {
// IE6-9 및 Opera의 경우
if (node.attachevent) {
node.attachevent ( '만', 콜백);
// 알아채다:
// 1.
//이 상황에서는 Opera가 아무것도하지 않으므로 타임 아웃으로 떨어집니다.
// 2.
}
}
불행히도, 이번에는 다른 브라우저에서는 CSS가로드되는지 판단하는 것이 편리하지 않습니다. Settimeout 간격 이벤트를 사용해야합니다.
다음과 같이 코드 코드를 복사하십시오.
// Seajs에 대한 코드 축제
함수 폴 (노드, 콜백) {
if (callback.iscalled) {
반품;
}
var isloaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (노드 [ '시트']) {
isloaded = true;
}
}
// Firefox의 경우
else if if (노드 [ '시트']) {
노력하다 {
if (노드 [ 'sheet']. cssrules) {
isloaded = true;
}
} catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
isloaded = true;
}
}
}
if (isloaded) {
// 렌더링 할 시간을줍니다.
settimeout (function () {
콜백 ();
}, 1);
}
또 다른 {
settimeout (function () {
설문 조사 (노드, 콜백);
}, 1);
}
}
settimeout (function () {
설문 조사 (노드, 콜백);
}, 0);
SEAJS가 제공 한 완전한 처리는 다음과 같습니다.
다음과 같이 코드 코드를 복사하십시오.
함수 styleonload (노드, 콜백) {
// IE6-9 및 Opera의 경우
if (node.attachevent) {
node.attachevent ( '만', 콜백);
// 알아채다:
// 1.
//이 상황에서는 Opera가 아무것도하지 않으므로 타임 아웃으로 떨어집니다.
// 2.
}
// Firefox, Chrome, Safari 용 폴링
또 다른 {
settimeout (function () {
설문 조사 (노드, 콜백);
}, 0); // 캐시의 경우
}
}
함수 폴 (노드, 콜백) {
if (callback.iscalled) {
반품;
}
var isloaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (노드 [ '시트']) {
isloaded = true;
}
}
// Firefox의 경우
else if if (노드 [ '시트']) {
노력하다 {
if (노드 [ 'sheet']. cssrules) {
isloaded = true;
}
} catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
isloaded = 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 || '동적 스타일'));
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);
}
함수 loadcss () {
var stylenode = createlink ( '/wp-content/themes/bluenight/style.css');
styleonload (styleenode, function () {) {
경고 ( "로드");
});
}
Seajs 코드를 보았을 때, 나는 Diego Perini를 보았던 또 다른 해결책을 즉시 기억했습니다.
다음과 같이 코드 코드를 복사하십시오.
/*
* 저작권 (C) 2010 Diego Perini
* 모든 권리 보유.
*
* CSSREAM.JS -CSS로드/준비 상태 알림
*
* 저자 : Gmail com>의 Diego Perini <Diego.perini
* 버전 : 0.1
* 생성 : 20100616
* 릴리스 : 20101104
*
* 라이센스 :
* //www.vevb.com * 다운로드 :
* http://javaScript.nwbox.com/cssream/cssream.js
*/
함수 CSSREAM (FN, LINK) {
var d = 문서,
t = d.createstylesheet,
r = t?? ''cssrules ',
s = t? ''시트 ':'시트 ',
l = d.getElementsByByTagName ( 'link');
// 전달 된 링크 또는 마지막 링크 노드
링크 || ((L.L.LENGTH -1];
함수 check () {
노력하다 {
링크 && 링크 [s] && link [s] [r] && link [s] [r] [0];
} catch (e) {
거짓을 반환합니다.
}
}
(함수 폴 () {) {
check () && settimeout (fn, 0) ||
}) ();
}
실제로 JQuery의 Domream 이벤트의 판단 강령을 읽은 경우 원칙은 비슷합니다. 또한 Settimeout에 의해 DOM 노드가 회전에 의해로드되는지 여부를 결정하는 것입니다.
또한 Fackbook에는#loadcssdom과 같은 동적 CSS 스타일을 통해 고정 된 스타일이 포함되어 있으며 Loadcssdom은 1px 스타일의 높이입니다. 그런 다음 DOM 객체를 동적으로 생성 하고이 loadcssdom 스타일을 추가하십시오. 그런 다음 Settimeout은 loadcssdo의 높이가 1px인지 물었습니다. 이 처리 방법의 솔루션은 "CSSP : JavaScript로 CSS로드하고 온라인 콜백을받을 수 있습니다."
"JavaScript Patterns"Stoyan의 저자는 그의 블로그에서 "스타일 시트가 실제로로드 된시기는 언제입니까?"
이것을 본 후, 당신은 한숨을 쉬게 될 수 있습니다 : Khan은 CSS가로드되었는지 판단하면 쉽지 않습니다! 사실, 내 여기는 결절이 있습니다. 개발에서 동적 로딩 CSS 외에도 JavaScript 작동을 동적으로로드하고 동적로드 JavaScript의 관련 내용에 대해서도 씁니다. 그러나 그 전에는 다음을 살펴보십시오.
"필요할 때 자바 스크립트/HTML/CSS가 주문형으로로드되도록하십시오."이 라이브러리는 특히 동적로드 HTML, CSSCRIPT로 처리됩니다. 저자가 소개 한대로 :
편리한 기능을 제공하는 작은 JavaScript 라이브러리는 www.vevb.com을 보장합니다.
"JavavaScript를 최대한 빨리 사용할 수 있다고 CSS에 알려주십시오."
이것을 본 후에는 얽히지 않을 수 있습니다. 웹 페이지의 스타일을 잡을 때 JavaScript를 사용할 수 있는지 여부를 다르게보고 작업 할 수 있습니다.
글쎄, 나는 이번에 너무 많이 말했다. 나는 그것이 모든 사람의 발전과 학습에 도움이되기를 바랍니다!