Dom加載讓圖片加載完再執(zhí)行的腳本代碼
更新時(shí)間:2008年05月15日 23:35:15 作者:
當(dāng)大家使用window.onload執(zhí)行一個(gè)函數(shù)時(shí),必須要等到頁面上的圖片等信息全部加載完畢之后才執(zhí)行的。但很多時(shí)候圖片的數(shù)量比較多,所以需要很多時(shí)間下載。更令人尷尬的是,當(dāng)網(wǎng)頁文檔(或者說Dom)已經(jīng)加載完畢,而圖片尚未加載完畢,很多用戶已經(jīng)開始瀏覽網(wǎng)頁,但這時(shí)很多由window.onload所觸發(fā)的函數(shù)不能執(zhí)行,這就導(dǎo)致一部分功能不能完美地給用戶使用,更嚴(yán)重的是會(huì)給用戶留下不好的印象!
現(xiàn)在,我們來研究一下如何解決這個(gè)問題,解決方法就是在DOM加載完畢之后就執(zhí)行程序。
先介紹兩個(gè)人。一,jquery的作者:John Resig;二,javascript的世界級(jí)大師:dean edwards。(大家要記住這兩位天才?。?nbsp;
jquery里有專門解決DOM加載的函數(shù)$(document).ready()(簡(jiǎn)寫就是$(fn)),非常好用!John Resig在《Pro JavaScript Techniques》里,有這樣一個(gè)方法處理DOM加載,原理就是通過document&& document.getElementsByTagName &&document.getElementById&& document.body 去判斷Dom樹是否加載完畢。代碼如下:
function domReady( f ) {
// 如果DOM加載完畢,馬上執(zhí)行函數(shù)
if ( domReady.done ) return f();
// 假如我們已增加一個(gè)函數(shù)
if ( domReady.timer ) {
// 把它加入待執(zhí)行的函數(shù)清單中
domReady.ready.push( f );
} else {
// 為頁面加載完成綁定一個(gè)事件,
// 為防止它最先完成. 使用 addEvent(下面列出).
addEvent( window, “l(fā)oad”, isDOMReady );
// 初始化待執(zhí)行的函數(shù)的數(shù)組
domReady.ready = [ f ];
// 經(jīng)可能快地檢查Dom是否已可用
domReady.timer = setInterval( isDOMReady, 13 );
}
}
// 檢查Dom是否已可操作
function isDOMReady() {
// 假如已檢查出Dom已可用, 忽略
if ( domReady.done ) return false;
// 檢查若干函數(shù)和元素是否可用
if ( document && document.getElementsByTagName && document.getElementById && document.body ) {
// 假如可用, 停止檢查
clearInterval( domReady.timer );
domReady.timer = null;
// 執(zhí)行所有等待的函數(shù)
for ( var i = 0; i < domReady.ready.length; i++ )
domReady.ready[i]();
// 記錄在此已經(jīng)完成
domReady.ready = null;
domReady.done = true;
}
}
// 由 Dean Edwards 在2005 所編寫addEvent/removeEvent,
// 由 Tino Zijdel整理
// http://dean.edwards.name/weblog/2005/10/add-event/
//優(yōu)點(diǎn)是1.可以在所有瀏覽器工作;
//2.this指向當(dāng)前元素;
//3.綜合了所有瀏覽器防止默認(rèn)行為和阻止事件冒泡的的函數(shù)
//缺點(diǎn)就是僅在冒泡階段工作
function addEvent(element, type, handler) {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = handleEvent;
};
// a counter used to create unique IDs
addEvent.guid = 1;
function removeEvent(element, type, handler) {
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
};
function handleEvent(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(window.event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
還有一個(gè)估計(jì)由幾個(gè)外國(guó)大師合作寫的,實(shí)現(xiàn)同樣功能。
/*
* (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig
* Special thanks to Dan Webb's domready.js Prototype extension
* and Simon Willison's addLoadEvent
*
* For more info, see:
* http://www.thefutureoftheweb.com/blog/adddomloadevent
* http://dean.edwards.name/weblog/2006/06/again/
* http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
* http://simon.incutio.com/archive/2004/05/26/addLoadEvent
*
*
* To use: call addDOMLoadEvent one or more times with functions, ie:
*
* function something() {
* // do something
* }
* addDOMLoadEvent(something);
*
* addDOMLoadEvent(function() {
* // do other stuff
* });
*
*/
addDOMLoadEvent = (function(){
// create event function stack
var load_events = [],
load_timer,
script,
done,
exec,
old_onload,
init = function () {
done = true;
// kill the timer
clearInterval(load_timer);
// execute each function in the stack in the order they were added
while (exec = load_events.shift())
exec();
if (script) script.onreadystatechange = '';
};
return function (func) {
// if the init function was already ran, just run this function now and stop
if (done) return func();
if (!load_events[0]) {
// for Mozilla/Opera9
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", init, false);
// for Internet Explorer
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=//0><\/scr"+"ipt>");
script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete")
init(); // call the onload handler
};
/*@end @*/
// for Safari
if (/WebKit/i.test(navigator.userAgent)) { // sniff
load_timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState))
init(); // call the onload handler
}, 10);
}
// for other browsers set the window.onload, but also execute the old window.onload
old_onload = window.onload;
window.onload = function() {
init();
if (old_onload) old_onload();
};
}
load_events.push(func);
}
})();
先介紹兩個(gè)人。一,jquery的作者:John Resig;二,javascript的世界級(jí)大師:dean edwards。(大家要記住這兩位天才?。?nbsp;
jquery里有專門解決DOM加載的函數(shù)$(document).ready()(簡(jiǎn)寫就是$(fn)),非常好用!John Resig在《Pro JavaScript Techniques》里,有這樣一個(gè)方法處理DOM加載,原理就是通過document&& document.getElementsByTagName &&document.getElementById&& document.body 去判斷Dom樹是否加載完畢。代碼如下:
復(fù)制代碼 代碼如下:
function domReady( f ) {
// 如果DOM加載完畢,馬上執(zhí)行函數(shù)
if ( domReady.done ) return f();
// 假如我們已增加一個(gè)函數(shù)
if ( domReady.timer ) {
// 把它加入待執(zhí)行的函數(shù)清單中
domReady.ready.push( f );
} else {
// 為頁面加載完成綁定一個(gè)事件,
// 為防止它最先完成. 使用 addEvent(下面列出).
addEvent( window, “l(fā)oad”, isDOMReady );
// 初始化待執(zhí)行的函數(shù)的數(shù)組
domReady.ready = [ f ];
// 經(jīng)可能快地檢查Dom是否已可用
domReady.timer = setInterval( isDOMReady, 13 );
}
}
// 檢查Dom是否已可操作
function isDOMReady() {
// 假如已檢查出Dom已可用, 忽略
if ( domReady.done ) return false;
// 檢查若干函數(shù)和元素是否可用
if ( document && document.getElementsByTagName && document.getElementById && document.body ) {
// 假如可用, 停止檢查
clearInterval( domReady.timer );
domReady.timer = null;
// 執(zhí)行所有等待的函數(shù)
for ( var i = 0; i < domReady.ready.length; i++ )
domReady.ready[i]();
// 記錄在此已經(jīng)完成
domReady.ready = null;
domReady.done = true;
}
}
// 由 Dean Edwards 在2005 所編寫addEvent/removeEvent,
// 由 Tino Zijdel整理
// http://dean.edwards.name/weblog/2005/10/add-event/
//優(yōu)點(diǎn)是1.可以在所有瀏覽器工作;
//2.this指向當(dāng)前元素;
//3.綜合了所有瀏覽器防止默認(rèn)行為和阻止事件冒泡的的函數(shù)
//缺點(diǎn)就是僅在冒泡階段工作
function addEvent(element, type, handler) {
// assign each event handler a unique ID
if (!handler.$$guid) handler.$$guid = addEvent.guid++;
// create a hash table of event types for the element
if (!element.events) element.events = {};
// create a hash table of event handlers for each element/event pair
var handlers = element.events[type];
if (!handlers) {
handlers = element.events[type] = {};
// store the existing event handler (if there is one)
if (element["on" + type]) {
handlers[0] = element["on" + type];
}
}
// store the event handler in the hash table
handlers[handler.$$guid] = handler;
// assign a global event handler to do all the work
element["on" + type] = handleEvent;
};
// a counter used to create unique IDs
addEvent.guid = 1;
function removeEvent(element, type, handler) {
// delete the event handler from the hash table
if (element.events && element.events[type]) {
delete element.events[type][handler.$$guid];
}
};
function handleEvent(event) {
var returnValue = true;
// grab the event object (IE uses a global event object)
event = event || fixEvent(window.event);
// get a reference to the hash table of event handlers
var handlers = this.events[event.type];
// execute each event handler
for (var i in handlers) {
this.$$handleEvent = handlers[i];
if (this.$$handleEvent(event) === false) {
returnValue = false;
}
}
return returnValue;
};
function fixEvent(event) {
// add W3C standard event methods
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
return event;
};
fixEvent.preventDefault = function() {
this.returnValue = false;
};
fixEvent.stopPropagation = function() {
this.cancelBubble = true;
};
還有一個(gè)估計(jì)由幾個(gè)外國(guó)大師合作寫的,實(shí)現(xiàn)同樣功能。
復(fù)制代碼 代碼如下:
/*
* (c)2006 Jesse Skinner/Dean Edwards/Matthias Miller/John Resig
* Special thanks to Dan Webb's domready.js Prototype extension
* and Simon Willison's addLoadEvent
*
* For more info, see:
* http://www.thefutureoftheweb.com/blog/adddomloadevent
* http://dean.edwards.name/weblog/2006/06/again/
* http://www.vivabit.com/bollocks/2006/06/21/a-dom-ready-extension-for-prototype
* http://simon.incutio.com/archive/2004/05/26/addLoadEvent
*
*
* To use: call addDOMLoadEvent one or more times with functions, ie:
*
* function something() {
* // do something
* }
* addDOMLoadEvent(something);
*
* addDOMLoadEvent(function() {
* // do other stuff
* });
*
*/
addDOMLoadEvent = (function(){
// create event function stack
var load_events = [],
load_timer,
script,
done,
exec,
old_onload,
init = function () {
done = true;
// kill the timer
clearInterval(load_timer);
// execute each function in the stack in the order they were added
while (exec = load_events.shift())
exec();
if (script) script.onreadystatechange = '';
};
return function (func) {
// if the init function was already ran, just run this function now and stop
if (done) return func();
if (!load_events[0]) {
// for Mozilla/Opera9
if (document.addEventListener)
document.addEventListener("DOMContentLoaded", init, false);
// for Internet Explorer
/*@cc_on @*/
/*@if (@_win32)
document.write("<script id=__ie_onload defer src=//0><\/scr"+"ipt>");
script = document.getElementById("__ie_onload");
script.onreadystatechange = function() {
if (this.readyState == "complete")
init(); // call the onload handler
};
/*@end @*/
// for Safari
if (/WebKit/i.test(navigator.userAgent)) { // sniff
load_timer = setInterval(function() {
if (/loaded|complete/.test(document.readyState))
init(); // call the onload handler
}, 10);
}
// for other browsers set the window.onload, but also execute the old window.onload
old_onload = window.onload;
window.onload = function() {
init();
if (old_onload) old_onload();
};
}
load_events.push(func);
}
})();
相關(guān)文章
JavaScript模板引擎實(shí)現(xiàn)原理實(shí)例詳解
這篇文章主要介紹了JavaScript模板引擎實(shí)現(xiàn)原理,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript模板引擎原理、定義、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下2018-12-12JS生成隨機(jī)數(shù)的多種方法匯總(不同范圍、類型的隨機(jī)數(shù))
js產(chǎn)生隨機(jī)數(shù)通常是使用javascript的Math.random()函數(shù),下面這篇文章主要給大家介紹了關(guān)于JS生成隨機(jī)數(shù)的多種方法(不同范圍、類型的隨機(jī)數(shù))的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法詳解
這篇文章主要介紹了JS實(shí)現(xiàn)多物體運(yùn)動(dòng)的方法,結(jié)合實(shí)例形式較為詳細(xì)的分析了javascript實(shí)現(xiàn)多物體運(yùn)動(dòng)的原理與相關(guān)操作技巧,需要的朋友可以參考下2018-01-01Google 爬蟲如何抓取 JavaScript 的內(nèi)容
我們測(cè)試了谷歌爬蟲是如何抓取 JavaScript,下面就是我們從中學(xué)習(xí)到的知識(shí),需要的朋友可以參考下2017-04-04JS實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(zhuǎn)方法
這篇文章主要介紹了JS實(shí)現(xiàn)移動(dòng)端雙指縮放和旋轉(zhuǎn)方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-12-12js利用正則表達(dá)式檢驗(yàn)輸入內(nèi)容是否為網(wǎng)址
這篇文章主要為大家詳細(xì)介紹了js利用正則表達(dá)式檢驗(yàn)輸入內(nèi)容是否為網(wǎng)址的相關(guān)方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-07-07JavaScript實(shí)現(xiàn)獲取select下拉框中第一個(gè)值的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)獲取select下拉框中第一個(gè)值的方法,涉及javascript針對(duì)頁面元素屬性的相關(guān)獲取操作技巧,需要的朋友可以參考下2018-02-02