☰

JSON リクエストでプリロード リンクが機能しないのはなぜですか? 質問する

tag-icon • tag-icon javascript json html w3c
JSON リクエストでプリロード リンクが機能しないのはなぜですか? 質問する

私の Web サイトの JavaScript は、いくつかの JSON を読み込んで自身を初期化します。

これらをプリロードして、JavaScript が Ajax リクエストを開始するときに瞬時にロードされるようにしたいと思います。

新しいlinkそのためにタグが存在します。

私はこれを使用して次のような JSON をロードしようとしました:

<link rel="preload" href="/test.json">

ただし、Chrome はこれを 2 回読み込み、コンソールに警告を表示するようです。

リソース test.json はリンク プリロードを使用してプリロードされましたが、ウィンドウのロード イベントから数秒以内に使用されませんでした。無駄にプリロードされていないことを確認してください。

つまり、プリロードはJSONでは機能しないようです。実際、JSONへの参照は見つかりませんでした。仕様。

それは正しいですか、それとも私が間違っていますか?

ベストアンサー1

によるとhttps://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content、JSONファイルに追加する必要がありますas="fetch"。そのため、コードは次のようになります。

<link rel="preload" href="/test.json" as="fetch">

これはすべての最新ブラウザでサポートされており、このリソースが数秒以内に使用されない場合は警告メッセージが表示されます。これは、このような場合に「プリロード」するのは逆効果であるためです (遅延、二重ロードなど)。

<link rel="prefetch" ...>これは、将来のナビゲーションを予測し、広くサポートされていないものとは異なります。

これに関する Chrome の図解記事:https://medium.com/reloading/preload-prefetch-and-priorities-in-chrome-776165961bbf

おすすめ記事