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

CSS 最適化: "display:none" は本当に画像の読み込みを防止しますか?

CSS プロパティ "display:none" は画像の読み込みを効果的に防止しますか?モバイル デバイスでウェブサイトの速度を向上させるには?

レスポンシブなウェブサイト デザインをしながらモバイルブラウザからコンテンツを非表示にするために「display:none」を使用することを推奨していますが、画像の読み込みを防ぐ効果はまだ不明です。

回答:

ブラウザの動作:

現在のブラウザー テクノロジーでは、CSS プロパティをインテリジェントに処理できます。ブラウザーは、「display:none」の画像が必要ではないことを検出すると、読み込みプロセスをスキップすることがあります。

画像メタデータ:

「display:none」であっても: none」が適用されても、画像のサイズやその他のメタデータにはスクリプトからアクセスできるため、一部の読み込みがまだ行われている可能性があることが示唆されています。

ブラウザ固有の動作:

Chrome 68.0 以降では、親要素が「display:none」を使用して非表示になっている場合、画像の読み込みが妨げられることが確認されています。

代替案解決策:

読み込みを防ぐことが重要な場合は、次のような代替方法があります。

• を削除する。ドキュメントの要素

src 属性を「data:」または「about:blank」に設定

制限事項:

"display : none」は、画像が遅延読み込みなしで最初の画面に表示される場合、画像の読み込みを妨げません。このシナリオでは、画像は読み込まれますが、非表示のままになります。

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