提取jquery的ready()方法單獨(dú)使用示例
大家可以使用windows.onload事件,但onload在看來,就是頁面上的東西(img,iframe等資源)全部都加載完畢后才能發(fā)生,如果頁面內(nèi)有大的圖片的話,會在頁面展現(xiàn)后好久時間后才執(zhí)行。
如果只需要對DOM進(jìn)行操作,那么這時就沒必要等到頁面全部加載了。我們需要更快的方法。Firefox有DOMContentLoaded事件可以輕松解決,可惜的就是IE沒有。
MSDN關(guān)于JSCRIPT的一個方法有段不起眼的話,當(dāng)頁面DOM未加載完成時,調(diào)用doScroll方法時,會產(chǎn)生異常。那么我們反過來用,如果不異常,那么就是頁面DOM加載完畢了。所以 對于Mozilla & Opera 瀏覽器,在dom樹載入后有現(xiàn)成的 DOMContentLoaded 事件。對于Safari 瀏覽器,有document.onreadystatechange事件,當(dāng)該觸發(fā)時,如果 document.readyState=complete時,可視為dom樹已經(jīng)載入。
對于ie,當(dāng)在iframe內(nèi)時,同樣有document.onreadystatechange事件,對于ie在非iframe內(nèi)時,只有不斷地通過能否執(zhí)行doScroll判斷dom是否加載完畢。
在本例中每間隔5毫秒嘗試去執(zhí)行 document.documentElement.doScroll('left')。在ie8下,貌視非iframe窗口也會有document.onreadystatechange事件,另外你也可以在構(gòu)建自己的框架時使用此函數(shù)。
(function(){
var isReady=false; //判斷onDOMReady方法是否已經(jīng)被執(zhí)行過
var readyList= [];//把需要執(zhí)行的方法先暫存在這個數(shù)組里
var timer;//定時器句柄
ready=function(fn)
{
if (isReady )
fn.call( document);
else
readyList.push( function() { return fn.call(this);});
return this;
}
var onDOMReady=function(){
for(var i=0;i< readyList.length;i++)
{
readyList[i].apply(document);
}
readyList = null;
}
var bindReady = function(evt)
{
if(isReady) return;
isReady=true;
onDOMReady.call(window);
if(document.removeEventListener)
{
document.removeEventListener("DOMContentLoaded", bindReady, false);
}
else if(document.attachEvent)
{
document.detachEvent("onreadystatechange", bindReady);
if(window == window.top){
clearInterval(timer);
timer = null;
}
}
};
if(document.addEventListener){
document.addEventListener("DOMContentLoaded", bindReady, false);
}
else if(document.attachEvent)
{
document.attachEvent("onreadystatechange", function(){
if((/loaded|complete/).test(document.readyState))
bindReady();
});
if(window == window.top)
{
timer = setInterval(function(){
try
{
isReady||document.documentElement.doScroll('left');//在IE下用能否執(zhí)行doScroll判斷 dom是否加載完畢
}
catch(e)
{
return;
}
bindReady();
},5);
}
}
})();
使用方法如下:
ready(dosomething);//dosomething為已存在的函數(shù)
//也可以通過閉包來使用
ready(function(){
//這里是邏輯代碼
});
- jquery事件的ready()方法使用詳解
- JavaScript的jQuery庫中ready方法的學(xué)習(xí)教程
- jquery $(document).ready()和window.onload的區(qū)別淺析
- jQuery中ready事件用法實(shí)例
- jQuery的ready方法詳解
- jquery中的$(document).ready()使用小結(jié)
- Jquery中"$(document).ready(function(){ })"函數(shù)的使用詳解
- JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
- jquery ready(fn)事件使用介紹
- 深入分析jQuery的ready函數(shù)是如何工作的(工作原理)
相關(guān)文章
Easyui 去除jquery-easui tab頁div自帶滾動條的方法
這篇文章主要介紹了Easyui 去除jquery-easui tab頁div自帶滾動條的方法,非常不錯,具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05使用jQuery.wechat構(gòu)建微信WEB應(yīng)用
本期要講的就是我痛苦中掙扎徘徊后寫的jQuery.wechat,一個提供了統(tǒng)一API的、基于jQuery.promise的jQuery.plugin。希望能多少幫助到大家。2014-10-10使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動效果(sharepoint 2007)
在sharepoint 2007網(wǎng)站中,使用jQuery實(shí)現(xiàn)dropdownlist的聯(lián)動效果.2011-03-03jQuery的Cookie封裝,與PHP交互的簡單實(shí)現(xiàn)
下面小編就為大家?guī)硪黄猨Query的Cookie封裝,與PHP交互的簡單實(shí)現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-10-10jquery給圖片添加鼠標(biāo)經(jīng)過時的邊框效果
鼠標(biāo)經(jīng)過時圖片產(chǎn)生塌陷,實(shí)則應(yīng)該將邊框控制直接加在IMG標(biāo)簽上即可,下面有個不錯的示例,大家可以感受下2013-11-11使用element-ui的el-menu導(dǎo)航選中后刷新頁面保持當(dāng)前選中狀態(tài)
這篇文章主要介紹了使用element-ui的el-menu導(dǎo)航選中后刷新頁面保持當(dāng)前選中狀態(tài),本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-07-07Jquery UI實(shí)現(xiàn)一次拖拽多個選中的元素操作
這篇文章主要介紹了Jquery UI實(shí)現(xiàn)一次拖拽多個選中的元素操作,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-10-10基于jQuery和CSS3制作數(shù)字時鐘附源碼下載(jquery篇)
本篇文章基于jquery讓數(shù)字時鐘真正的跑起來,實(shí)現(xiàn)一個帶有日期和星期的網(wǎng)頁版數(shù)字時鐘,效果非常逼真,感興趣的朋友一起看看吧2015-11-11jquery通過load獲取文件的內(nèi)容并跳到錨點(diǎn)的方法
這篇文章主要介紹了jquery通過load獲取文件的內(nèi)容并跳到錨點(diǎn)的方法,涉及l(fā)oad及animate等方法的使用技巧,需要的朋友可以參考下2015-01-01