jquery のロード メソッドの欠点: 1. ロード メソッドは 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. ドキュメントのコンテンツをヘッドとボディにロードしたい場合は、コンテンツを div でラップしてからロードできます。
2. スクリプト部分では、コールバックを使用できます。関数は動的に作成され、
3 にロードされます。スタイル シートを動的にロードすることはお勧めできません。動的にロードしないと、ページのフラッシュ、つまりページの更新時に問題が発生します。 、スタイルがレンダリングされていない画像が 1 秒間表示され、その後通常の画像に戻ります (理由は以下と同じ)
欠陥 2: 問題スクロール バーのオフセットは、動的読み込み後に発生します。ページを更新するときに発生します。スクロールバーのオフセット。
通常の状況では、js がブラウザーのレンダリングをブロックしないように、スクリプト ファイルをドキュメント本文の最後に配置します。これにより、ページがレンダリングされた後に、load メソッドが実行されます。動的にロードされるページは最後です。 1 つです。追加されたばかりです。スクロール バーは最初から上部に固定されています。ヘッダー部分を動的に読み込んだ後、スクロール バーが下に移動し、上部に戻りません。解決策load メソッドのコールバック関数に $(document).scrollTop(0);
を追加するか、script タグの async 属性を使用して、 js スクリプトを非同期にロードすると、スクリプトが head に配置されます。
欠点 3: 非同期ロードの問題ロードが非同期的にトリガーされると、次のメソッドの 2 行のコードが同時に実行されます。ネットワークの遅延やその他の問題により、どちらの文が最初に実行されるかは不明です。 div id="templateId">init
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 (キャッシュの問題) に基づいて、より深い問題に遭遇する可能性もあります。問題は、ロードしたデータが 仕様に準拠していない場合、元のデータが破壊されてしまうことです。 dom 構造を変更し、その後 dom や他のノードを取得するときに異常が発生します。たとえば、元の
<html>
<head>
<title>test</title>
</head>
<body>
<textarea id="mytext"></textarea>
</body>
</html>ロードによって取得されたデータが