jquery load方法的缺陷:1.load方法會自動忽略掉head、body、script標籤;2、動態載入後會出現滾動條偏移的問題,只要在load方法的回呼函數裡面加入「$(document).scrollTop(0);」即可解決;3、由於網路延遲等問題,先執行哪句程式碼並不確定;4、有快取問題;5、會出現結構破壞問題。
本教學操作環境:windows7系統、jquery3.6版本、Dell G3電腦。
jquery load()方法可以幫我們把頁面重複的文件部分,像是標題列和底部資訊部分。我們可以提取到一個模板html,然後透過load方法動態載入到每個頁面。在使用的過程中遇到幾個問題
缺陷1:load方法會自動忽略掉head、body、script標籤
1、如果想載入head和body裡面的文件內容,可以透過將內容包裹在一個div中,然後將其載入過來
2、script部分我們可以透過load方法的回調函數動態建立載入進來
3、不建議動態載入樣式表,否則會出現頁面閃現的問題,也就是頁面刷新時,出現1秒鐘沒渲染樣式的畫面,然後再恢復正常畫面(原因同下)
刷新頁面時。滾動條偏移。
一般情況下,我們會把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 load法有什麼缺陷的詳細內容。更多資訊請關注PHP中文網其他相關文章!