Perlu menilai apakah file CSS ini dimuat, dan praktik masing -masing browser relatif besar.
Salin kode kode sebagai berikut:
// Kode Festival untuk Seajs
Function styleOnload (node, callback) {
// untuk IE6-9 dan opera
if (node.attachevent) {
node.attachevent ('hanya', callback);
// melihat:
// 1.
// Situasi ini, Opera tidak melakukan apa -apa, jadi mundur ke batas waktu.
// 2.
}
}
Sayangnya, kali ini di browser lain, tidak nyaman untuk menilai apakah CSS dimuat. Dan Anda perlu menggunakan acara interval setTimeout:
Salin kode kode sebagai berikut:
// Kode Festival untuk Seajs
Poll Function (node, callback) {
if (callback.iscalled) {
Kembali;
}
var isloaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (node ['sheet']) {
isloaded = true;
}
}
// untuk Firefox
lain if (node ['sheet']) {
mencoba {
if (node ['sheet']. cssrules) {
isloaded = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
isloaded = true;
}
}
}
if (isloaded) {
// Berikan waktu untuk diterjemahkan.
setTimeout (function () {
callback ();
}, 1);
}
kalau tidak {
setTimeout (function () {
jajak pendapat (simpul, panggilan balik);
}, 1);
}
}
setTimeout (function () {
jajak pendapat (simpul, panggilan balik);
}, 0);
Pemrosesan lengkap yang diberikan oleh Seajs adalah ini:
Salin kode kode sebagai berikut:
Function styleOnload (node, callback) {
// untuk IE6-9 dan opera
if (node.attachevent) {
node.attachevent ('hanya', callback);
// melihat:
// 1.
// Situasi ini, Opera tidak melakukan apa -apa, jadi mundur ke batas waktu.
// 2.
}
// Polling untuk Firefox, Chrome, Safari
kalau tidak {
setTimeout (function () {
jajak pendapat (simpul, panggilan balik);
}, 0); // untuk cache
}
}
Poll Function (node, callback) {
if (callback.iscalled) {
Kembali;
}
var isloaded = false;
if (/webkit/i.test tostkator.useragent)) {// webkit
if (node ['sheet']) {
isloaded = true;
}
}
// untuk Firefox
lain if (node ['sheet']) {
mencoba {
if (node ['sheet']. cssrules) {
isloaded = true;
}
} Catch (ex) {
// ns_error_dom_security_err
if (ex.code === 1000) {
isloaded = true;
}
}
}
if (isloaded) {
// Berikan waktu untuk diterjemahkan.
setTimeout (function () {
callback ();
}, 1);
}
kalau tidak {
setTimeout (function () {
jajak pendapat (simpul, panggilan balik);
}, 1);
}
}
// fungsi tautan pembuatan dinamis saya
Function createLink (cssurl, lnkid, charset, media) {{{{{{{{{{{
var head = document.geteLementsbyTagname ('head') [0],
linktag = null;
if (! cssurl) {
Mengembalikan false;
}
linktag = document.createElement ('link');
linktag.setAttribute ('id', (lnkid || 'dinamis-gaya'));
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 () {) {
peringatan ("dimuat");
});
}
Ketika saya melihat kode Seajs, saya segera ingat solusi lain yang saya lihat diego Perini:
Salin kode kode sebagai berikut:
/*
* Hak Cipta (C) 2010 Diego Perini
* Semua hak dilindungi undang -undang.
*
* cssream.js -css yang dimuat/pemberitahuan negara siap
*
* Penulis: Diego Perini <Diego.perini at gmail com>
* Versi: 0.1
* Dibuat: 20100616
* Rilis: 20101104
*
* Lisensi:
* //www.vevb.com * Unduh:
* http://javascript.nwbox.com/cssream/cssream.js
*/
Fungsi cssream (fn, link) {
var d = dokumen,
t = D. Createstylesheet,
r = t? aturan ':' cssrules ',
S = T? 'Stylesheet': 'Sheet',
l = D.GetElementsByByTagname ('Link');
// link link atau node tautan terakhir
tautan ||.
function check () {
mencoba {
Return link && link [s] && link [s] [r] && link [s] [r] [0];
} Catch (e) {
Mengembalikan false;
}
}
(Function poll () {) {
periksa () && setTimeout (fn, 0) ||
}) ();
}
Bahkan, jika Anda telah membaca kode penilaian acara domream jQuery, prinsipnya serupa. Ini juga untuk menentukan apakah simpul DOM dimuat dengan rotasi dengan setTimeout.
Selain itu, FackBook berisi gaya tetap melalui gaya CSS dinamis, seperti#LoadCSSDOM, dan LoadCSSDOM adalah ketinggian gaya 1px. Kemudian buat objek DOM secara dinamis, tambahkan gaya LoadCSSDOM ini. Kemudian SetTimeout bertanya apakah LoadCSSDO memiliki ketinggian 1px. Untuk solusi dari metode pemrosesan ini, Anda dapat mengenakan "CSSP: Memuat CSS dengan JavaScript dan mendapatkan panggilan balik online."
Penulis "JavaScript Patterns" Stoyan, di blognya, menjelaskan secara detail "Kapan stylesheet benar -benar dimuat?".
Setelah menonton ini, Anda mungkin menghela nafas: Khan, menilai apakah CSS dimuat tidak mudah! Faktanya, saya di sini adalah umbi -brosur, karena dalam pengembangan, selain CSS memuat dinamis, kita juga harus secara dinamis memuat operasi JavaScript dan secara dinamis memuat operasi HTML. , tapi sebelum itu, saya sarankan melihat ini:
"Pastikan JavaScripts/HTML/CSS dimuat sesuai permintaan saat diperlukan", perpustakaan ini secara khusus ditangani dengan HTML pemuatan dinamis, CSScript. Saat penulis diperkenalkan:
Pastikan adalah perpustakaan JavaScript kecil yang menyediakan fungsi yang praktis memastikan White All.
"Beri tahu CSS bahwa javavascript tersedia secepatnya"
Setelah menonton ini, Anda mungkin tidak terjerat: ketika Anda bergaya bagian dari halaman web yang akan terlihat dan bekerja secara berbeda pada apakah JavaScript tersedia atau tidak.
Yah, saya katakan begitu banyak kali ini, saya harap ini akan membantu untuk pengembangan dan pembelajaran semua orang!