ホームページ > ウェブフロントエンド > CSSチュートリアル > 「display:none」は本当に画像の読み込みを妨げますか?

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

Linda Hamilton
リリース: 2024-12-19 04:51:09
オリジナル
512 人が閲覧しました

Does `display:none` Really Prevent Image Loading?

画像の読み込みに対する「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 サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
著者別の最新記事
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート