摘要:好久沒寫文章了,再來一波,首先上圖參考鏈接與的區(qū)別詳見瀏覽器工作原理瀏覽器工作原理前言頁面加載完成有兩種事件一是,表示文檔結(jié)構(gòu)結(jié)構(gòu)已經(jīng)加載完成不包含圖片等非文字媒體文件,二是,指示頁面包含圖片等文件在內(nèi)的所有元素都加載完成。
好久沒寫文章了,再來一波,首先上圖:
參考鏈接:onload與ready的區(qū)別
詳見瀏覽器工作原理:瀏覽器工作原理
頁面加載完成有兩種事件:
一是ready,表示文檔結(jié)構(gòu)(DOM結(jié)構(gòu))已經(jīng)加載完成(不包含圖片等非文字媒體文件),
二是onload,指示頁面包含圖片等文件在內(nèi)的所有元素都加載完成。(可以說:ready 在onload 前加載!??!)
我的理解: 一般樣式控制的,比如圖片大小控制放在onload 里面加載;而:jS事件觸發(fā)的方法,可以在ready 里面加載;
$(function(){ // do something }); 其實這個就是jq ready()的簡寫,他等價于: $(document).ready(function(){ //do something }) //或者下面這個方法,jQuer的默認參數(shù)是:“document”; $().ready(function(){ //do something })body的onload事件與$(document).ready相比 加載多函數(shù)問題
原生javascript中函數(shù)沒有重載,所以會實現(xiàn)覆蓋
a)body中聲明的onload事件(DOM0級別)會被后面的window.onlad()(DOM0級別)覆蓋
b)只能在body中的onload中實現(xiàn)多函數(shù)執(zhí)行
function a(){alert("a");} function b(){alert("b");}
c)多個window.load()會覆蓋(如a)實例)
window.onload = function(){alert("hello");} window.onload = function(){alert("world");}
在JQuery中你可以利用多個JQuery.Ready()方法,它們會按次序依次執(zhí)行
代碼和內(nèi)容分離問題body中的onload不分離
而window.onload()分離以及$(document),ready()可以分離
$(document).ready():在DOM結(jié)構(gòu)加載完畢之后執(zhí)行
window.onload:在所有的文件加載完畢之后執(zhí)行
$(document).ready():最大的區(qū)別是DOM加載完畢之后,不必再去等圖片(異步)加載完畢后執(zhí)行js代碼
window.onload用法$(window).load()
使用$(window).load()方法,這 個方法會等到頁面所有內(nèi)容加載完畢后才會觸發(fā),并且同時又沒有OnLoad事件的弊端.
以下內(nèi)容會在頁面所有內(nèi)容加載完成后按先后順序依次執(zhí)行.
與之對應(yīng)的unload事件(會在頁面關(guān)閉時候執(zhí)行)
$(window).unload(function() { alert("good bye"); });
文章版權(quán)歸作者所有,未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為,您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址:http://www.ezyhdfw.cn/yun/82333.html
摘要:和的區(qū)別文檔加載完成事件頁面加載完成有兩種事件一是,表示文檔結(jié)構(gòu)已經(jīng)加載完成不包含圖片等非文字媒體文件二是,指示頁面包含圖片等文件在內(nèi)的所有元素都加載完成。即當所有鏈接被鼠標單擊的時候,都執(zhí)行也就是說頁面加載時綁定,真正該觸發(fā)時觸發(fā)。 document.ready和onload的區(qū)別——JavaScript文檔加載完成事件頁面加載完成有兩種事件: 一是ready,表示文檔結(jié)構(gòu)已經(jīng)加載完...
摘要:如果你的文件涉及操作,可以直接在里面添加回調(diào)函數(shù),或者說基本上我們的文件都可以寫在里面進行調(diào)用其實,這和我們將文件放在底部,在上面加以及異步加載文件的效果是一樣一樣的。 如果大家想繼續(xù)看下面的內(nèi)容的話,有一個要求,就是回答我一個問題:你這樣寫過代碼嗎? window.onload = function(){ $(.gravatar).on(click,function(){ ...
摘要:的速度明顯快于重排重繪與的區(qū)別理解了瀏覽器是如何渲染頁面之后我們再來比較這兩者就很好理解了執(zhí)行的時間必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。 先上圖,我們再慢慢解釋,這圖就是瀏覽器加載網(wǎng)頁的一個過程 showImg(https://segmentfault.com/img/remote/1460000008648335?w=516&h=425); 當我們在瀏覽器輸入一個地址...
摘要:的速度明顯快于重排重繪與的區(qū)別理解了瀏覽器是如何渲染頁面之后我們再來比較這兩者就很好理解了執(zhí)行的時間必須等到頁面內(nèi)包括圖片的所有元素加載完畢后才能執(zhí)行。 先上圖,我們再慢慢解釋,這圖就是瀏覽器加載網(wǎng)頁的一個過程 showImg(https://segmentfault.com/img/remote/1460000008648335?w=516&h=425); 當我們在瀏覽器輸入一個地址...
閱讀 768·2021-11-15 11:37
閱讀 3395·2021-10-27 14:14
閱讀 6440·2021-09-13 10:30
閱讀 3035·2021-09-04 16:48
閱讀 2030·2021-08-18 10:22
閱讀 2200·2019-08-30 14:19
閱讀 825·2019-08-30 10:54
閱讀 1807·2019-08-29 18:40