「display:none」は本当に画像の読み込みを妨げますか?

画像の読み込みに対する「display:none」の影響

多くのレスポンシブ Web サイト開発チュートリアルでは、「display:none」CSS プロパティを使用して、コンテンツがモバイル ブラウザに表示されないように隠し、Web サイトの読み込み時間を短縮します。しかし、「display:none」は本当に画像の読み込みを防止しますか?

「display:none」は画像の読み込みを停止しますか?

ブラウザはより洗練されています。現在、バージョンによっては、ブラウザが画像に関連性がないと判断した場合、その画像の読み込みを控える場合があります。

画像に「display:none」スタイルが割り当てられている場合でも、その寸法にはスクリプトからアクセスできます。親要素が非表示になっている場合、Chrome バージョン 68.0 では画像の読み込みが省略されます。

「display:none」の代替手段

特に画像の読み込みを防ぎたい場合は、次の手法を検討してください:

• IMG 要素をdocument.
• IMG src 属性を「data:」または「about:blank」に設定します。

「display:none」の制限

「display: none」は、初期画面に表示され、遅延ロードされていない画像には効果がない場合があります。画像は読み込まれますが、表示されません。

以上が「display:none」は本当に画像の読み込みを妨げますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。