jquery load法有什麼缺陷

青灯夜游原創: 2023-01-28 15:17:352715瀏覽

jquery load方法的缺陷：1.load方法會自動忽略掉head、body、script標籤；2、動態載入後會出現滾動條偏移的問題，只要在load方法的回呼函數裡面加入「$(document).scrollTop(0);」即可解決；3、由於網路延遲等問題，先執行哪句程式碼並不確定；4、有快取問題；5、會出現結構破壞問題。

jquery load法有什麼缺陷

本教學操作環境：windows7系統、jquery3.6版本、Dell G3電腦。

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的f9e9f467eef3d7c578ccb55596434de3init16b28748ea4df4d9c2150843fecfba68元素又是通過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載入得到的資料如果不符合100db36a723c770d327fc0aef2ce13b1規範,那麼就會破壞原有的dom結構,導致後續取dom和其它節點異常.

#例如原有

<html>
 <head>
  
  <title>test</title>
 </head>
 <body>
    <textarea id="mytext"></textarea>
 </body>
</html>

如果load得到的資料為

4750256ae76b6b9d804861d8f69e79d3<

那麼最終產生了為不規則的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影片教學、web前端影片】

以上是jquery load法有什麼缺陷的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：css div內容超出隱藏怎麼實現下一篇：css div內容超出隱藏怎麼實現

看更多