من الضروري أن تحكم على ملف CSS ، وممارسة كل متصفح كبيرة نسبيًا.
نسخ رمز رمز على النحو التالي:
// مهرجان الكود إلى Seajs
وظيفة styleonload (العقدة ، رد الاتصال) {
// لـ IE6-9 والأوبرا
if (node.attachevent) {
node.attachevent ('Only' ، callback) ؛
// يلاحظ:
// 1.
// هذا الموقف ، الأوبرا لا يفعل شيئًا ، لذا فإن العودة إلى المهلة.
// 2.
}
}
لسوء الحظ ، هذه المرة في المتصفحات الأخرى ، ليس من المناسب للغاية الحكم على ما إذا كانت CSS محملة. وتحتاج إلى استخدام حدث SetTimeout الفاصل:
نسخ رمز رمز على النحو التالي:
// مهرجان الكود إلى Seajs
استطلاع الوظيفة (العقدة ، رد الاتصال) {
if (callback.iscalled) {
يعود؛
}
var isloaded = false ؛
if (/webkit/i.test tost.com)) {// webkit
if (node ['sheet']) {
istloaded = صحيح ؛
}
}
// for Firefox
وإلا إذا (العقدة [ورقة "]) {
يحاول {
if (Node ['sheet']. cssroules) {
istloaded = صحيح ؛
}
} catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
istloaded = صحيح ؛
}
}
}
إذا (isloaded) {
// إعطاء الوقت لتقديم.
setTimeout (function () {
أتصل مرة أخرى ()؛
} ، 1) ؛
}
آخر {
setTimeout (function () {
استطلاع (العقدة ، رد الاتصال) ؛
} ، 1) ؛
}
}
setTimeout (function () {
استطلاع (العقدة ، رد الاتصال) ؛
} ، 0) ؛
المعالجة الكاملة التي قدمتها Seajs هي:
نسخ رمز رمز على النحو التالي:
وظيفة styleonload (العقدة ، رد الاتصال) {
// لـ IE6-9 والأوبرا
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.com)) {// webkit
if (node ['sheet']) {
istloaded = صحيح ؛
}
}
// for Firefox
وإلا إذا (العقدة [ورقة "]) {
يحاول {
if (Node ['sheet']. cssroules) {
istloaded = صحيح ؛
}
} catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
istloaded = صحيح ؛
}
}
}
إذا (isloaded) {
// إعطاء الوقت لتقديم.
setTimeout (function () {
أتصل مرة أخرى ()؛
} ، 1) ؛
}
آخر {
setTimeout (function () {
استطلاع (العقدة ، رد الاتصال) ؛
} ، 1) ؛
}
}
// وظيفة رابط الإنشاء الديناميكي الخاص بي
وظيفة CreateLink (cssurl ، lnkid ، charset ، الوسائط) {{
var head = document.getElementsByTagname ('head') [0] ،
linktag = null ؛
if (! cssurl) {
العودة كاذبة
}
linktag = document.createElement ('link') ؛
linktag.setattribute ('id' ، (lnkid || 'dynamic-style')) ؛
linktag.setattribute ('rel' ، 'StylSheet') ؛
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 ، تذكرت على الفور حلًا آخر رأيته دييغو بيريني:
نسخ رمز رمز على النحو التالي:
/*
* حقوق الطبع والنشر (ج) 2010 دييغو بيريني
* جميع الحقوق محفوظة.
*
* cssream.js -css إخطار الحالة جاهزة
*
* المؤلف: دييغو بيريني <دييغو. perini في gmail com>
* الإصدار: 0.1
* تم إنشاؤها: 20100616
* الإصدار: 20101104
*
* رخصة:
* //www.vevb.com * تنزيل:
* http://javaScript.nwbox.com/cssream/cssream.js
*/
وظيفة cssream (fn ، الرابط) {
var d = وثيقة ،
t = d. createstylesheled ،
ص = ر؟
S = T؟
l = d.getElementsByTagName ('link') ؛
// رابط تم تمريره أو عقدة الارتباط الأخيرة
Link ||.
وظيفة check () {
يحاول {
إرجاع الرابط && link [s] && link [s] [r] && link [s] [r] [0] ؛
} catch (e) {
العودة كاذبة
}
}
(استطلاع الوظيفة () {) {
Check () && setTimeout (fn ، 0) || setTimeout (استطلاع ، 100) ؛
}) () ؛
}
في الواقع ، إذا كنت قد قرأت مدونة الحكم لحدث Domream الخاص بـ jQuery ، فإن المبدأ مشابه. يتم تحديد ما إذا كان يتم تحميل عقدة DOM من خلال استفسار setTimeout.
بالإضافة إلى ذلك ، يحتوي Fackbook على نمط ثابت من خلال نمط CSS الديناميكي ، مثل#loadcssdom ، و ledcssdom هو ارتفاع نمط 1 بكسل. ثم قم بإنشاء كائن DOM ديناميكيًا ، أضف نمط LOADCSSDOM هذا. ثم سأل SetTimeout عما إذا كان لدى LoadCssdo ارتفاع 1 بكسل. لحل طريقة المعالجة هذه ، يمكنك وضع "CSSP: تحميل CSS مع JavaScript والحصول على رد اتصال عبر الإنترنت."
أوضح مؤلف كتاب "JavaScript Patterns" Stoyan ، في مدونته ، بالتفصيل "متى يتم تحميل ورقة الأنماط حقًا؟".
بعد مشاهدة هذا ، قد تنهد: خان ، والحكم على ما إذا كان يتم تحميل CSS ليس بالأمر السهل! في الواقع ، أنا هنا عبارة عن مجموعة من الدرنات ، لأنه في التطوير ، بالإضافة إلى CSS الديناميكي ، يتعين علينا أيضًا تحميل عملية JavaScript وتحميل عمليات HTML ديناميكيًا. ، ولكن قبل ذلك ، أقترح إلقاء نظرة على هذه:
"تأكد من تحميل JavaScripts/HTML/CSS عند الطلب عند الحاجة" ، تتم معالجة هذه المكتبة على وجه التحديد مع التحميل الديناميكي HTML ، CSScript. كما قدم المؤلف:
تأكد من أن مكتبة JavaScript الصغيرة تضمن دالة مفيدة.
"أخبر CSS أن JavavaScript متاح في أسرع وقت ممكن"
بعد مشاهدة هذا ، قد لا تكون متشابكًا: عندما تكون أجزاء من صفحة الويب التي ستبدو وتعمل بشكل مختلف حول ما إذا كان JavaScript متاحًا أم لا.
حسنًا ، قلت كثيرًا هذه المرة ، آمل أن يكون ذلك مفيدًا لتطوير الجميع وتعلمهم!