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