jquery中的$(document).ready()與window.onload的區(qū)別
更新時(shí)間：2009年11月18日 20:01:15 作者：
瀏覽器執(zhí)行window.onload函數(shù)不僅僅是在構(gòu)建完DOM樹之后, 也是在所有圖像和其他外部資源完整的加載并且在瀏覽器窗口顯示完畢之后.
所以如果某個(gè)圖片或者其他資源加載很長時(shí)間, 訪問者就會(huì)看到一個(gè)不完整的頁面, 甚至在圖片加載之前就執(zhí)行了需要依賴動(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>"; }
);
//或者使用簡便語法:
/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>"; }
);
//或者使用簡便語法:
/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 跨域訪問解決原理案例詳解的相關(guān)資料,非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2016-07-07
這篇文章主要介紹了jQuery 查找元素操作,結(jié)合實(shí)例形式總結(jié)分析了jQuery針對(duì)頁面元素的各種常見查找操作實(shí)現(xiàn)方法,需要的朋友可以參考下2019-10-10
這篇文章介紹了jQuery extend 的簡單實(shí)例，有需要的朋友可以可以參考一下2013-09-09
淺談JQ中mouseover和mouseenter的區(qū)別
下面小編就為大家?guī)硪黄獪\談JQ中mouseover和mouseenter的區(qū)別。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。2016-09-09
jquery實(shí)現(xiàn)輸入框?qū)崟r(shí)輸入觸發(fā)事件代碼
本文主要分享了jquery實(shí)現(xiàn)輸入框?qū)崟r(shí)輸入觸發(fā)事件的代碼，代碼簡單易懂，需要的朋友一起來看下吧2016-12-12
jquery.validation.js在前端驗(yàn)證中使用起來非常方便,提供的功能基本上能滿足大部分驗(yàn)證需求，下面我們就來仔細(xì)研究下這款jQuery插件的具體使用方法。2015-04-04
jQuery實(shí)現(xiàn)圖片預(yù)加載效果
這篇文章分享一款基于jQuery圖片預(yù)加載ydxLazyLoad.js代碼。這是一款基于ydxLazyLoad.js插件實(shí)現(xiàn)的圖片延遲加載特效，感興趣的小伙伴們可以參考一下2015-11-11
jQuery+Ajax實(shí)現(xiàn)用戶名重名實(shí)時(shí)檢測
這篇文章主要為大家詳細(xì)介紹了jQuery Ajax實(shí)現(xiàn)用戶名重名實(shí)時(shí)檢測，針對(duì)用戶注冊(cè)時(shí)出現(xiàn)的用戶名重名問題進(jìn)行自動(dòng)檢測，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-06-06
從零開始學(xué)習(xí)jQuery (五) jquery事件與事件對(duì)象
事件是腳本編程的靈魂. 所以本章內(nèi)容也是jQuery學(xué)習(xí)的重點(diǎn). 本文將對(duì)jQuery中的事件處理以及事件對(duì)象進(jìn)行詳細(xì)的講解.2011-02-02
jquery實(shí)現(xiàn)類似EasyUI的頁面布局可改變左右的寬度
這篇文章主要介紹了通過jquery實(shí)現(xiàn)類似EasyUI的頁面布局可改變左右的寬度,需要的朋友可以參考下2014-07-07