window.onload 加載完畢的問(wèn)題及解決方案(下)
接上篇,其它方法:
一、在IE中還可以在onreadystatechange事件里進(jìn)行判斷
http://www.thefutureoftheweb.com/blog/adddomloadevent
這里有Jesse Skinner寫了一段獨(dú)立的腳本函數(shù)來(lái)解決各種瀏覽器的onload問(wèn)題,。
http://img.jb51.net/jslib/adddomloadevent.js
/*
* (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="http://0" src="http://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);
}
})();
二、另外還有在IE中的doScroll的,這是種方法只對(duì)IE有作用,而且它是一種hack方法。
在MSDN:About Element Behaviors 我們可以看到
When the ondocumentready event fires, the document has been completely parsed and built. Initialization code should be placed here if the component needs to navigate the primary document structure. The ondocumentready event notifies the component that the entire page is loaded, and it fires immediately before the onload event fires in the primary document.
A few methods, such as doScroll, require the primary document to be completely loaded. If these methods are part of an initialization function, they should be handled when the ondocumentready event fires.
http://javascript.nwbox.com/IEContentLoaded/
/*
*
* IEContentLoaded.js
*
* Author: Diego Perini (diego.perini at gmail.com) NWBOX S.r.l.
* Summary: DOMContentLoaded emulation for IE browsers
* Updated: 05/10/2007
* License: GPL/CC
* Version: TBD
*
*/
// @w window reference
// @fn function reference
function IEContentLoaded (w, fn) {
var d = w.document, done = false,
// only fire once
init = function () {
if (!done) {
done = true;
fn();
}
};
// polling for no errors
(function () {
try {
// throws errors until after ondocumentready
d.documentElement.doScroll('left');
} catch (e) {
setTimeout(arguments.callee, 50);
return;
}
// no errors, fire
init();
})();
// trying to always fire before onload
d.onreadystatechange = function() {
if (d.readyState == 'complete') {
d.onreadystatechange = null;
init();
}
};
}
在jQuery的源碼中,針對(duì)Mozilla, Opera 和webkit用的是DOMContentLoaded,也就是上一篇中第一種;
而對(duì)IE用的是doScroll的方法。
- 淺析document.ready和window.onload的區(qū)別講解
- JS:window.onload的使用介紹
- jquery $(document).ready() 與window.onload的區(qū)別
- jquery中的$(document).ready()與window.onload的區(qū)別
- js window.onload 加載多個(gè)函數(shù)的方法
- window.onload 加載完畢的問(wèn)題及解決方案(上)
- 頁(yè)面中body onload 和 window.onload 沖突的問(wèn)題的解決
- window.onload的頁(yè)面加載技巧
- window.onload綁定多個(gè)事件的兩種解決方案
相關(guān)文章
javascript之大字符串的連接的StringBuffer 類
javascript之大字符串的連接的StringBuffer 類...2007-05-05uniapp自定義驗(yàn)證碼輸入框并隱藏光標(biāo)
這篇文章主要介紹了uniapp自定義驗(yàn)證碼輸入框隱藏光標(biāo),效果是點(diǎn)擊輸入框喚起鍵盤,藍(lán)框就相當(dāng)于input的光標(biāo),驗(yàn)證碼輸入錯(cuò)誤或者不符合格式要求會(huì)將字體以及邊框改成紅色提示持續(xù)1s然后清空數(shù)據(jù),恢復(fù)原邊框樣式,需要的朋友可以參考下2023-02-02js實(shí)現(xiàn)點(diǎn)擊圖片自動(dòng)提交action的簡(jiǎn)單方法
下面小編就為大家?guī)?lái)一篇js實(shí)現(xiàn)點(diǎn)擊圖片自動(dòng)提交action的簡(jiǎn)單方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10Javascript 獲取鏈接(url)參數(shù)的方法
Javascript 獲取鏈接(url)參數(shù)的實(shí)現(xiàn)方法2009-02-02BootStrap學(xué)習(xí)系列之Bootstrap Typeahead 組件實(shí)現(xiàn)百度下拉效果(續(xù))
這篇文章主要介紹了BootStrap學(xué)習(xí)系列之Bootstrap Typeahead 組件實(shí)現(xiàn)百度下拉效果的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-07-07javascript 刪除數(shù)組中重復(fù)項(xiàng)(uniq)
巧妙去除數(shù)組中的重復(fù)項(xiàng)的方法參考,需要的朋友可以參考下。2010-01-01