jquery中的$(document).ready()與window.onload的區(qū)別
更新時(shí)間：2009年11月18日 20:01:15 作者：
瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構(gòu)建完DOM樹(shù)之后, 也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.
所以如果某個(gè)圖片或者其他資源加載很長(zhǎng)時(shí)間, 訪(fǎng)問(wèn)者就會(huì)看到一個(gè)不完整的頁(yè)面, 甚至在圖片加載之前就執(zhí)行了需要依賴(lài)動(dòng)態(tài)添加的元素的腳本而導(dǎo)致腳本錯(cuò)誤.
window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">動(dòng)態(tài)創(chuàng)建的div</div>"; }
解決辦法就是等DOM被解析后, 在圖像和外部資源加載之前執(zhí)行我們的函數(shù).在jQuery中讓這一實(shí)現(xiàn)變得可行:
//jQuery 使用動(dòng)態(tài)創(chuàng)建的$(document).ready(function)方法
$(document).ready(
function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用動(dòng)態(tài)創(chuàng)建的$(document).ready(function)方法</div>"; }
);
//或者使用簡(jiǎn)便語(yǔ)法:
/jQuery 使用$(function)方法
$(
function() { testDiv.innerHTML += "<div style=\"border:solid 1px #FF0000\">使用$(function)方法</div>"; }
);
window.onload = function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">動(dòng)態(tài)創(chuàng)建的div</div>"; }
解決辦法就是等DOM被解析后, 在圖像和外部資源加載之前執(zhí)行我們的函數(shù).在jQuery中讓這一實(shí)現(xiàn)變得可行:
復(fù)制代碼 代碼如下:
//jQuery 使用動(dòng)態(tài)創(chuàng)建的$(document).ready(function)方法
$(document).ready(
function() { testDiv.innerHTML = "<div style=\"border:solid 1px #FF0000\">使用動(dòng)態(tài)創(chuàng)建的$(document).ready(function)方法</div>"; }
);
//或者使用簡(jiǎn)便語(yǔ)法:
/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的加載順序
- 解析頁(yè)面加載與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元素。對(duì)層樣式的設(shè)置。將display:設(shè)置為none;讓層隱藏；對(duì)jq點(diǎn)擊彈出層相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧2016-01-01
基于jquery實(shí)現(xiàn)復(fù)選框全選，反選，全不選等功能
本文分享一段基于jQuery實(shí)現(xiàn)的復(fù)選框全選、全不選、反選功能的代碼，有需要的小伙伴可以參考一下2015-10-10
同域jQuery(跨)iframe操作DOM(實(shí)例講解)
本篇文章主要是對(duì)同域jQuery(跨)iframe操作DOM進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要演示了5個(gè)jQuery Mobile 觸摸事件實(shí)例,需要的朋友可以參考下。2016-06-06
這篇文章主要介紹了jQuery Ajax中的事件詳細(xì)介紹,本文詳細(xì)的講解了AJAX的局部事件和全局事件、事件的順序等內(nèi)容,需要的朋友可以參考下2015-04-04
jQuery position() 函數(shù)詳解以及jQuery中position函數(shù)的應(yīng)用
position()函數(shù)用于返回當(dāng)前匹配元素相對(duì)于其被定位的祖輩元素的偏移，也就是相對(duì)于被定位的祖輩元素的坐標(biāo)。該函數(shù)只對(duì)可見(jiàn)元素有效，通過(guò)本文給大家介紹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-08
Jquery each方法跳出循環(huán),并獲取返回值(實(shí)例講解)
這篇文章主要是對(duì)Jquery each方法跳出循環(huán),并獲取返回值進(jìn)行了詳細(xì)的介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要介紹了jQuery取消ajax請(qǐng)求的方法,可實(shí)現(xiàn)在Ajax請(qǐng)求超時(shí)的情況下取消請(qǐng)求的功能,需要的朋友可以參考下2015-06-06
StringTemplate遇見(jiàn)jQuery沖突的解決方法
最近在做一個(gè)流程引擎，現(xiàn)著手于自定義模板的處理。設(shè)計(jì)在模板中所有的數(shù)據(jù)都將與字段對(duì)應(yīng)，采用xml結(jié)構(gòu)序列化作為流程持久化機(jī)制。2011-09-09