มีความจำเป็นที่จะต้องตัดสินว่าไฟล์ CSS นี้ถูกโหลดหรือไม่และการฝึกฝนของแต่ละเบราว์เซอร์นั้นค่อนข้างใหญ่
คัดลอกรหัสรหัสดังนี้:
// Code Festival ถึง SEAJS
ฟังก์ชั่น styleonload (โหนด, การโทรกลับ) {
// สำหรับ IE6-9 และ Opera
if (node.attachevent) {
node.attachevent ('only', callback);
// สังเกต:
// 1.
// สถานการณ์นี้โอเปร่าไม่ได้ทำอะไรเลย
// 2.
-
-
น่าเสียดายที่เวลานี้ในเบราว์เซอร์อื่น ๆ มันไม่สะดวกที่จะตัดสินว่า CSS นั้นโหลดหรือไม่ และคุณต้องใช้เหตุการณ์ช่วงเวลา settimout:
คัดลอกรหัสรหัสดังนี้:
// Code Festival ถึง SEAJS
การสำรวจฟังก์ชัน (โหนด, การโทรกลับ) {
if (callback.iscalled) {
กลับ;
-
var isloaded = false;
if (/webkit/i.test tost tost.com)) {// webkit
if (node ['sheet']) {
isloaded = true;
-
-
// สำหรับ firefox
อื่นถ้า (node ['sheet']) {
พยายาม {
if (node ['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 ('only', callback);
// สังเกต:
// 1.
// สถานการณ์นี้โอเปร่าไม่ได้ทำอะไรเลย
// 2.
-
// การเลือกตั้งสำหรับ Firefox, Chrome, Safari
อื่น {
settimeout (function () {
โพล (โหนดโทรกลับ);
}, 0);
-
-
การสำรวจฟังก์ชัน (โหนด, การโทรกลับ) {
if (callback.iscalled) {
กลับ;
-
var isloaded = false;
if (/webkit/i.test tost tost.com)) {// webkit
if (node ['sheet']) {
isloaded = true;
-
-
// สำหรับ firefox
อื่นถ้า (node ['sheet']) {
พยายาม {
if (node ['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, สื่อ) {{
var head = document.getElementsByTagname ('head') [0],
linkTag = null;
ถ้า (! 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 LOTED/Ready State การแจ้งเตือน
-
* ผู้แต่ง: Diego Perini <Diego.perini ที่ Gmail com>
* เวอร์ชัน: 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.getElementsByTagname ('ลิงก์');
// ผ่านลิงค์หรือโหนดลิงค์ล่าสุด
ลิงค์ || (link = l.length -1];
ตรวจสอบฟังก์ชั่น () {
พยายาม {
คืนลิงค์ && ลิงค์ [s] && ลิงค์ [s] [r] && ลิงค์ [s] [r] [0];
} catch (e) {
กลับเท็จ;
-
-
(ฟังก์ชั่นโพล () {) {
ตรวจสอบ () && settimeout (fn, 0) || settimeout (โพล, 100);
-
-
ในความเป็นจริงหากคุณได้อ่านหลักจรรยาบรรณของเหตุการณ์ Domream ของ JQuery หลักการจะคล้ายกัน นอกจากนี้ยังมีการพิจารณาว่าโหนด DOM นั้นถูกโหลดผ่านการสอบถาม SetTimeOut หรือไม่
นอกจากนี้ Fackbook ยังมีสไตล์คงที่ผ่านสไตล์ CSS แบบไดนามิกเช่น#loadcssdom และ loadcssdom เป็นความสูงของสไตล์ 1px จากนั้นสร้างวัตถุ DOM แบบไดนามิกเพิ่มสไตล์ loadcssdom นี้ จากนั้น Settimeout ถามว่า Loadcssdo มีความสูง 1px หรือไม่ สำหรับการแก้ปัญหาของวิธีการประมวลผลนี้คุณสามารถใส่ "CSSP: การโหลด CSS ด้วย JavaScript และรับการโทรกลับออนไลน์"
ผู้เขียน "JavaScript Patterns" Stoyan ในบล็อกของเขาอธิบายในรายละเอียด "เมื่อไหร่ที่สไตล์ชีทโหลดจริง ๆ ?"
หลังจากดูสิ่งนี้คุณอาจถอนหายใจ: ข่านตัดสินว่า CSS โหลดนั้นไม่ง่ายเลย! ในความเป็นจริงที่นี่ของฉันคือหัววัด -เพราะในการพัฒนานอกเหนือจากการโหลด CSS แบบไดนามิกเรายังต้องโหลดการดำเนินการ JavaScript แบบไดนามิกและโหลดการดำเนินการ HTML แบบไดนามิก แต่ก่อนหน้านั้นฉันขอแนะนำให้ดูสิ่งเหล่านี้:
"ตรวจสอบให้แน่ใจว่า JavaScripts/HTML/CSS โหลดตามความต้องการเมื่อจำเป็น" ไลบรารีนี้ได้รับการจัดการโดยเฉพาะกับการโหลดแบบไดนามิก HTML, CSScript ตามที่ผู้เขียนแนะนำ:
ตรวจสอบให้แน่ใจว่าเป็นไลบรารี JavaScript ขนาดเล็กที่ประมวลผลฟังก์ชั่นที่มีประโยชน์
"บอก CSS ว่า JavavaScript พร้อมใช้งานโดยเร็ว"
หลังจากดูสิ่งนี้คุณอาจไม่ได้เข้าไปพัวพัน: เมื่อคุณมีสไตล์ส่วนหนึ่งของหน้าเว็บที่จะดูและทำงานแตกต่างกันว่า JavaScript พร้อมใช้งานหรือไม่
ฉันพูดมากในครั้งนี้ฉันหวังว่ามันจะเป็นประโยชน์ต่อการพัฒนาและการเรียนรู้ของทุกคน!