rel = preload for stylesheetは一度ダウンロードしたスタイルを適用していません

私は最初にrel=preloadを試しており、いくつかのスタイルシートに使用しています。rel = preload for stylesheetは一度ダウンロードしたスタイルを適用していません

<link rel="preload" href="css/styles.css" as="style"> 
<link rel="preload" href="//allyoucan.cloud/cdn/icofont/1.0.0beta/css/icofont.css" crossorigin="anonymous" as="style">

私はクローム61でテストしています、と私は期待通りにスタイルシートがダウンロードされていることがわかります、しかし、彼らは実際に適用されることはありません、と私はコンソールにメッセージが表示されます。ここで問題のコードですプリロードされたリソースが使用されていないと言っています。

rel=preloadを削除してrel=stylesheetにすると、正常に動作します。

紛失しているものがありますか？

出典

2017-10-17 Denno

が含まれていましたか？とにかく既に ' 'に入っているので、あらかじめ読み込んでおくのはスタイルシートにはあまり役に立ちません。 – Ryan

ああ、私は何とかオンラインの例でそれを逃した。ありがとう – Denno

それぞれrel = stylesheetとrel = preloadの2行が必要です。プリロードは単にそれをフェッチしていて、適用していないためです。

ただし、直前の1行にヒットするため、パフォーマンスの向上はほとんど見られません。

もっと良い選択肢は、折りたたみ部分の上に表示されるCSS（see here）をインライン化し、JavaScriptを使用してページの読み込み時にCSSファイル（see here）に追加することです。

出典

2017-10-17 10:36:58 John

私はライアンにコメントに返信してここに同じ答え。私は小規模なアプリケーションしか持っていないので、あまり予期しないプリロードを使用しようとしています。深い答えをありがとう – Denno

私はすべてアプリケーションに依存していることに同意します。それを管理しやすくするにはかなりの作業です。 – John

あなたがこのアプローチについてどう思いますか：

<link rel="preload" href="style.css" as="style" onload="this.rel='stylesheet'">

はリソース：あなたにも `それらのそれぞれについて、<リンクのrel = "スタイルシートを">` https://www.filamentgroup.com/lab/async-css.html

出典

2018-02-12 16:49:45

rel = preload for stylesheetは一度ダウンロードしたスタイルを適用していません

答えて

関連する問題