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

「display:none」は画像の読み込みを防ぐことができますか?

レスポンシブ Web デザインでは、モバイル ブラウザーで不要なコンテンツを非表示にしてパフォーマンスを向上させることが重要です。一般的な習慣。 1 つのアプローチには、「display:none」CSS プロパティを使用することが含まれます。この方法では実際に画像の読み込みが防止されますか? それとも、隠蔽されていてもコンテンツは引き続き取得されますか?

答え:

最新のブラウザーは、リソース管理においてよりインテリジェントになっています。ブラウザとバージョンによっては、画像の読み込みが必須でないとみなされた場合、画像の読み込みが停止されることがあります。

具体的には、Chrome v68.0 などのブラウザは、隠れた親要素を検出し、それに応じて画像の読み込みをスキップします。この動作は、ブラウザの開発者ツールで「ネットワーク」タブを調べることで確認できます。

ただし、画像が遅延読み込みなしで最初の画面に表示される場合、「display:none」では読み込みを完全に防止できない可能性があります。ただし、画像は表示されなくなります。

画像を防止する代替案読み込み:

不必要なコンテンツの読み込みを完全に防ぐには、次の代替案を検討してください:

• IMG 要素を省略します: に IMG 要素を追加しないようにします。 HTML ドキュメント。
• 画像ソースを「data:」に設定するか、 "about:blank": これらの値は画像の読み込みをトリガーしません。

"display:none" は可視性のみに影響し、コンテンツの取得を完全に阻止するわけではないことに注意してください。真のパフォーマンスの最適化については、上記の代替方法を検討してください。

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