「display:none」は本当にモバイルデバイスへの画像の読み込みを妨げますか?

レスポンシブ デザインの画像読み込みと「display:none」に関する虚偽の主張

多くの Web 開発チュートリアルでは、「display:none」の使用を推奨しています。モバイルブラウザからコンテンツを隠し、ページの読み込みを高速化する CSS プロパティ。ただし、実際はさらに微妙です。

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

一般に信じられていることに反して、「display:none」は自動的に読み込みを防止しません。モバイルブラウザでの画像の読み込み。最新のブラウザは、関連性に基づいてコンテンツの読み込みを最適化することに熟達しています。画像が非表示になっている場合でも、ブラウザーは必要と判断した場合には画像を読み込むことがあります。

画像の親要素が非表示になっている場合 (提供された JSFiddle で示されているように) などの特定の状況では、新しいバージョンのChrome は読み込みプロセスをスキップします。ただし、これはすべてのブラウザまたはすべての画像シナリオに共通の動作ではありません。

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

主な目的が不必要な画像の読み込みを防ぐことである場合モバイル ブラウザの場合は、次の代替手段を検討してください:

• 回避初期要素の組み込み: HTML に IMG 要素を完全に含めないか、空の「src」属性を割り当てます。
• 画像の遅延読み込み: JavaScript ベースの遅延を利用します。ユーザーが下にスクロールすると画像を動的にロードするロード技術

他のシナリオにおける「display:none」の影響

「display:none」は上記の画像に対して異なる影響を与えることに注意することが重要です初期ビューポート。遅延ロードされておらず、最初の画面に表示される画像の場合、「display:none」を指定すると、表示はされますがロードされなくなります。

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