首頁  >  文章  >  web前端  >  jquery load法有什麼缺陷

jquery load法有什麼缺陷

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

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