本篇內(nèi)容介紹了“jquery的load方法有哪些缺陷”的有關(guān)知識，在實(shí)際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧！希望大家仔細(xì)閱讀，能夠?qū)W有所成！
創(chuàng)新互聯(lián)是一家專注于成都網(wǎng)站制作、網(wǎng)站建設(shè)與策劃設(shè)計,正安網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:正安等地區(qū)。正安做網(wǎng)站價格咨詢:18982081108
jquery load方法的缺陷：1、load方法會自動忽略掉head、body、script標(biāo)簽；2、動態(tài)加載后會出現(xiàn)滾動條偏移的問題，只需在load方法的回調(diào)函數(shù)里面加入“$(document).scrollTop(0);”即可解決；3、由于網(wǎng)絡(luò)延遲等問題，先執(zhí)行哪句代碼并不確定；4、有緩存問題；5、會出現(xiàn)結(jié)構(gòu)破壞問題。
jquery load()方法可以幫我們把頁面重復(fù)的文檔部分，比如標(biāo)題欄和底部信息部分。我們可以提取到一個模板html，然后通過load方法動態(tài)加載到每個頁面。在使用的過程中遇到幾個問題
缺陷1：load方法會自動忽略掉head、body、script標(biāo)簽
1、如果想加載head和body里面的文檔內(nèi)容，可以通過將內(nèi)容包裹在一個div中，然后將其加載過來
2、script部分我們可以通過load方法的回調(diào)函數(shù)動態(tài)創(chuàng)建加載進(jìn)來
3、不建議動態(tài)加載樣式表，否則會出現(xiàn)頁面閃現(xiàn)的問題，即頁面刷新時，出現(xiàn)1秒鐘沒渲染樣式的畫面，然后再恢復(fù)正常畫面（原因同下）
缺陷2：動態(tài)加載后會出現(xiàn)滾動條偏移的問題
刷新頁面時。滾動條偏移。
一般情況下，我們會把script文件放在文檔body最后面，避免js阻塞瀏覽器渲染，這就導(dǎo)致我們會在頁面渲染完后再執(zhí)行我們的load方法，動態(tài)加載的頁面也就是最后才加上去的，滾動條一開始就是固定在最上面的，動態(tài)加載header部分后，滾動條會偏下，并沒有回到頂部
解決
在load方法的回調(diào)函數(shù)里面加入$(document).scrollTop(0);
或者利用script標(biāo)簽的async屬性，讓js腳本異步加載，然后即可將script放在頭部
缺陷3: 異步加載問題
由于load是異步觸發(fā)的,以下方法中的2行代碼都是同時并發(fā)執(zhí)行的,由于網(wǎng)絡(luò)延遲等問題,哪句先執(zhí)行并不確定.
而id為templateId的
如果是后面第3行的$("#templateId").html("hellow");先執(zhí)行,那么由于$("#templateId")找不到(此時尚未加載完div),其實(shí)并不會執(zhí)行html("hellow")操作.
重慶分公司
重慶分公司
function load(targetId,templateName) {
$("#"+targetId).load(contextPath+templateName);
$("#templateId").html("hello");
}
缺陷4: 緩存問題
由于很多瀏覽器為了降低請求服務(wù)器的負(fù)荷,做了同樣的請求地址,從本地緩存取歷史數(shù)據(jù)的優(yōu)化.所以我們需要在地址后面添加一些動態(tài)后綴.
function load(targetId,templateName) {
var nowDate = new Date();
var randomId = nowDate.getTime();//防緩存
$("#"+targetId).load(contextPath+templateName+"?"+randomId);
}
缺陷5： 結(jié)構(gòu)破壞問題
在陷阱1(緩存問題)的基礎(chǔ)上,可能還會遇到更深層次的問題,那就是當(dāng)我們load加載得到的數(shù)據(jù)如果不符合規(guī)范,那么就會破壞原有的dom結(jié)構(gòu),導(dǎo)致后續(xù)取dom和其它節(jié)點(diǎn)異常.
比如原有
test
如果load得到的數(shù)據(jù)為