jquery中的$(document).ready()與window.onload的區(qū)別
更新時(shí)間:2009年11月18日 20:01:15 作者:
瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構(gòu)建完DOM樹之后, 也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.
所以如果某個圖片或者其他資源加載很長時(shí)間, 訪問者就會看到一個不完整的頁面, 甚至在圖片加載之前就執(zhí)行了需要依賴動態(tài)添加的元素的腳本而導(dǎo)致腳本錯誤.
window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">動態(tài)創(chuàng)建的div</div>"; }
解決辦法就是等DOM被解析后, 在圖像和外部資源加載之前執(zhí)行我們的函數(shù).在jQuery中讓這一實(shí)現(xiàn)變得可行:
//jQuery 使用動態(tài)創(chuàng)建的$(document).ready(function)方法
$(document).ready(
function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用動態(tài)創(chuàng)建的$(document).ready(function)方法</div>"; }
);
//或者使用簡便語法:
/jQuery 使用$(function)方法
$(
function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; }
);
window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">動態(tài)創(chuàng)建的div</div>"; }
解決辦法就是等DOM被解析后, 在圖像和外部資源加載之前執(zhí)行我們的函數(shù).在jQuery中讓這一實(shí)現(xiàn)變得可行:
復(fù)制代碼 代碼如下:
//jQuery 使用動態(tài)創(chuàng)建的$(document).ready(function)方法
$(document).ready(
function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用動態(tài)創(chuàng)建的$(document).ready(function)方法</div>"; }
);
//或者使用簡便語法:
/jQuery 使用$(function)方法
$(
function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; }
);
您可能感興趣的文章:
- jquery $(document).ready() 與window.onload的區(qū)別
- JQuery onload、ready概念介紹及使用方法
- jquery的$(document).ready()和onload的加載順序
- 解析頁面加載與js函數(shù)的執(zhí)行 onload or ready
- 一張表格告訴你windows.onload()與$(document).ready()的區(qū)別
- JQuery的ready函數(shù)與JS的onload的區(qū)別詳解
- 淺析document.ready和window.onload的區(qū)別講解
- jQuery中document與window以及l(fā)oad與ready 區(qū)別詳解
- JQ中$(window).load和$(document).ready區(qū)別與執(zhí)行順序
相關(guān)文章
基于jQuery實(shí)現(xiàn)點(diǎn)擊彈出層實(shí)例代碼
基于jquery實(shí)現(xiàn)點(diǎn)擊鏈接彈出層效果,其基本實(shí)現(xiàn)原理是這樣的:jquery操作DOM元素。對層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏;對jq點(diǎn)擊彈出層相關(guān)知識感興趣的朋友一起學(xué)習(xí)吧2016-01-01基于jquery實(shí)現(xiàn)復(fù)選框全選,反選,全不選等功能
本文分享一段基于jQuery實(shí)現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼,有需要的小伙伴可以參考一下2015-10-10同域jQuery(跨)iframe操作DOM(實(shí)例講解)
本篇文章主要是對同域jQuery(跨)iframe操作DOM進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用
position()函數(shù)用于返回當(dāng)前匹配元素相對于其被定位的祖輩元素的偏移,也就是相對于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對可見元素有效,通過本文給大家介紹jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用,感興趣的朋友一起學(xué)習(xí)吧2015-12-12基于jquery的時(shí)間段實(shí)現(xiàn)代碼
基于jquery的時(shí)間段實(shí)現(xiàn)代碼,需要的朋友可以參考下2012-08-08Jquery each方法跳出循環(huán),并獲取返回值(實(shí)例講解)
這篇文章主要是對Jquery each方法跳出循環(huán),并獲取返回值進(jìn)行了詳細(xì)的介紹,需要的朋友可以過來參考下,希望對大家有所幫助2013-12-12