溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇內容介紹了“jquery的load方法有哪些缺陷”的有關知識，在實際案例的操作過程中，不少人都會遇到這樣的困境，接下來就讓小編帶領大家學習一下如何處理這些情況吧！希望大家仔細閱讀，能夠學有所成！
jquery load方法的缺陷：1、load方法會自動忽略掉head、body、script標簽；2、動態加載后會出現滾動條偏移的問題，只需在load方法的回調函數里面加入“$(document).scrollTop(0);”即可解決；3、由于網絡延遲等問題，先執行哪句代碼并不確定；4、有緩存問題；5、會出現結構破壞問題。
jquery load()方法可以幫我們把頁面重復的文檔部分，比如標題欄和底部信息部分。我們可以提取到一個模板html，然后通過load方法動態加載到每個頁面。在使用的過程中遇到幾個問題
缺陷1：load方法會自動忽略掉head、body、script標簽
1、如果想加載head和body里面的文檔內容，可以通過將內容包裹在一個div中，然后將其加載過來
2、script部分我們可以通過load方法的回調函數動態創建加載進來
3、不建議動態加載樣式表，否則會出現頁面閃現的問題，即頁面刷新時，出現1秒鐘沒渲染樣式的畫面，然后再恢復正常畫面（原因同下）
缺陷2：動態加載后會出現滾動條偏移的問題
刷新頁面時。滾動條偏移。
一般情況下，我們會把script文件放在文檔body最后面，避免js阻塞瀏覽器渲染，這就導致我們會在頁面渲染完后再執行我們的load方法，動態加載的頁面也就是最后才加上去的，滾動條一開始就是固定在最上面的，動態加載header部分后，滾動條會偏下，并沒有回到頂部
解決
在load方法的回調函數里面加入$(document).scrollTop(0);
或者利用script標簽的async屬性，讓js腳本異步加載，然后即可將script放在頭部
缺陷3: 異步加載問題
由于load是異步觸發的,以下方法中的2行代碼都是同時并發執行的,由于網絡延遲等問題,哪句先執行并不確定.
而id為templateId的<div id="templateId">init</div>元素又是通過load加載進來的.
如果是后面第3行的$("#templateId").html("hellow");先執行,那么由于$("#templateId")找不到(此時尚未加載完div),其實并不會執行html("hellow")操作.
function load(targetId,templateName) {
$("#"+targetId).load(contextPath+templateName);
$("#templateId").html("hello");
}
缺陷4: 緩存問題
由于很多瀏覽器為了降低請求服務器的負荷,做了同樣的請求地址,從本地緩存取歷史數據的優化.所以我們需要在地址后面添加一些動態后綴.
function load(targetId,templateName) {
var nowDate = new Date();
var randomId = nowDate.getTime();//防緩存
$("#"+targetId).load(contextPath+templateName+"?"+randomId);
}
缺陷5： 結構破壞問題
在陷阱1(緩存問題)的基礎上,可能還會遇到更深層次的問題,那就是當我們load加載得到的數據如果不符合<html>規范,那么就會破壞原有的dom結構,導致后續取dom和其它節點異常.
比如原有
<html>
<head>
<title>test</title>
</head>
<body>
<textarea id="mytext"></textarea>
</body>
</html>
如果load得到的數據為 <textarea><
那么最終生成了為不規則的html閉包.下次再取dom時可能取不到了,因為破壞了原有的結構
<html>
<head>
<title>test</title>
</head>
<body>
<textarea id="mytext"><textarea><</textarea>
</body>
</html>
此時我們可以改成
function load(targetId,templateName) {
var nowDate = new Date();
var randomId = nowDate.getTime();//防緩存
$("#"+targetId).load(contextPath+templateName+"?"+randomId,{},function (responseTxt){
$("#"+targetId).val(responseTxt);
});
}
此時生成的html元素不會作為dom節點,而是作為文本域的原始文本插入,也就沒有破壞原始dom.所以下次取值還是正常的
<!doctype html>
<html>
<head>
<title>test</title>
</head>
<body>
<textarea id="mytext">"\<textarea\>\<"</textarea>
</body>
</html>“jquery的load方法有哪些缺陷”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識可以關注億速云網站，小編將為大家輸出更多高質量的實用文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
