「display:none」は最新のブラウザでの画像の読み込みを妨げますか?

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

レスポンシブ Web デザインの支持者は、しばしば「display:none」 CSS に依存します。モバイル ブラウジング エクスペリエンスを向上させるプロパティ。ただし、重要な疑問が生じます。このプロパティは画像の読み込みを妨げるのか、それともバックグラウンドで画像をフェッチするのでしょうか?

真実が明らかに: 進化するブラウザ

当初、画像の「表示」を「なし」に設定すると、読み込みに影響を与えることなく画像が非表示になります。ただし、最新のブラウザはよりインテリジェントになっています。ページの表示部分に画像が不要であることを検出し、その読み込みをスキップできるようになりました。特に、

Chrome には、画像の親要素が非表示になっている場合に画像の読み込みを防ぐ機能があります。この動作は次の場所で確認できます: http://jsfiddle.net/tnk3j08s/.

読み込みを防ぐための代替アプローチ

画像の読み込みを完全に阻止したい場合場合は、次の代替案を検討してください。

• IMG 要素: ドキュメントから IMG 要素を除外するだけです。
• IMG ソースの変更: これを防ぐには、IMG の src 属性を「data:」または「about:blank」に更新します。実際の画像を取得します。

重要注

上記の戦略を効果的に機能させるには、画像が初期画面に表示されず、遅延ロードされるべきではありません。これらの条件が満たされていない場合、画像は読み込まれても非表示になる可能性があります。

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