Pertama, urutan pemuatan halaman:
Parsing struktur HTML.
Muat skrip eksternal dan file stylesheet.
Parsing dan jalankan kode skrip.
Membangun model HTML DOM.
Muat file eksternal seperti gambar.
Halaman telah dimuat.
Yaitu:
html → head → title → #text (judul halaman web) → style → load style → parse style → link → load file style sheet eksternal → parsing external style sheet → skrip → muat file skrip eksternal → parsing file skrip eksternal → jalankan skrip eksternal → isi → div → skrip → muat skrip → parse skrip → jalankan skrip → img → skrip → muat skrip → parse skrip → jalankan skrip → muat file gambar eksternal → inisialisasi halaman selesai.
Pemuatan awal JS.
memuat
Ini dipanggil bukan ketika dokumen dimuat, tetapi ketika semua elemen halaman (termasuk gambar, dll.) dimuat. Jika ada gambar berukuran besar di halaman dan membutuhkan waktu lama untuk diunduh, maka skrip akan melakukannya tidak pernah dapat dimuat. Inisialisasi, hingga pemuatan gambar selesai, pengalaman pengguna akan sangat terpengaruh dalam kasus yang parah. Namun, window.onload bukannya tidak berguna terisi penuh sebelum menyediakan fungsi terkait pengguna, jadi window .onload Ini dapat menyediakan fungsi "memuat", atau konten halaman sangat kecil, dan document.ready() tidak diperlukan sama sekali tergantung pada situasinya, onload dan ready harus digunakan secara wajar;
Gunakan onload untuk memuat:
Copy kode kodenya sebagai berikut:
jendela.onload=fungsi(){
var currentRenderer = 'javascript';
FusionCharts.setCurrentRenderer(currentRenderer);
var chartObj = FusionCharts baru({
swfUrl: "Pie3D.swf",
lebar: "290", tinggi: "210",
id: 'sampleChart',
Sumber data: "/ucenter/seo/new_seo_tool.php?check=xml&val={{pre_num}}",
format data: FusionChartsDataFormats.XMLURL,
renderPada: 'grafik1div'
}).memberikan();
}
siap
Ada peristiwa yang disebut DOMContentLoaded di W3C, yang dipicu ketika DOM (Document Object Model) dimuat.
Metode satu:
Copy kode kodenya sebagai berikut:
Mirip dengan $(function(){...}) $(document).ready(function(){...}) Jquery
(fungsi () {
var yaitu = !!(window.attachEvent && !window.opera);
var wk = /webkit//(/d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525);
var fn = [];
var run = fungsi () { for (var i = 0; i < fn.panjang; i++) fn[i]() };
var d = dokumen;
d.siap = fungsi (f) {
if (!ie && !wk && d.addEventListener)
return d.addEventListener('DOMContentLoaded', f, false);
jika (fn.push(f) > 1) kembali;
jika (yaitu)
(fungsi () {
coba { d.documentElement.doScroll('kiri');
catch (err) { setTimeout(argumen.callee, 0);
})();
lain jika (minggu)
var t = setInterval(fungsi () {
if (/^(dimuat|selesai)$/.test(d.readyState))
clearInterval(t), jalankan();
}, 0);
};
})();
Saat menelepon:
dokumen.siap(fungsi(){
waspada('oke');
}
Metode dua:
Copy kode kodenya sebagai berikut:
/Jika W3C DOM2 didukung, gunakan metode W3C
if (dokumen.addEventListener){
document.addEventListener("DOMContentLoaded", te, false);
}
else if (/MSIE/i.test(navigator.userAgent)){/jika itu browser IE (tidak didukung)
/Buat tag skrip, yang memiliki atribut defer dan akan dimuat saat dokumen dimuat.
dokumen.tulis("
var skrip = document.getElementByIdx_x("__ie_onload");
/Jika dokumen memang dimuat, panggil metode inisialisasi
skrip.onreadystatechange = fungsi() {
if (ini.readyState == 'selesai') {
te();
}
}
}
else if (/WebKit/i.test(navigator.userAgent)) {/Jika itu browser Safari (tidak didukung)
/Buat pengatur waktu, periksa setiap 0,01 detik, dan panggil metode inisialisasi jika dokumen dimuat
var _timer = setInterval( fungsi() {
if (/loaded|complete/.test(document.readyState)) {
clearInterval(_timer);
te();
}
}, 10);
}
else {/Jika tidak ada cara di atas, gunakan metode terburuk (dalam hal ini, Opera 7 akan berjalan di sini)
jendela.onload = fungsi(e) {
te();
}
}
fungsi(){
waspada('oke');
}