Verhindert „display:none' wirklich das Laden von Bildern auf Mobilgeräten?

CSS-Optimierung: Verhindert „display:none“ wirklich das Laden von Bildern?

Verhindert die CSS-Eigenschaft „display:none“ effektiv das Laden von Bildern? mobile Geräte zur Verbesserung der Website-Geschwindigkeit?

Während responsives Website-Design empfiehlt, „display:none“ zu verwenden, um Inhalte auszublenden Bei mobilen Browsern bleibt die Wirksamkeit bei der Verhinderung des Ladens von Bildern unklar.

Antwort:

Browserverhalten:

Aktuelle Browsertechnologie ermöglicht einen intelligenten Umgang mit CSS-Eigenschaften. Wenn ein Browser erkennt, dass ein Bild mit „display:none“ nicht erforderlich ist, überspringt er möglicherweise den Ladevorgang.

Bildmetadaten:

Auch mit „display:none“ Wenn „Keine“ angewendet wird, können Skripte immer noch auf die Größe des Bildes und andere Metadaten zugreifen, was darauf hindeutet, dass möglicherweise noch etwas geladen wird auftreten.

Browserspezifisches Verhalten:

Es wurde beobachtet, dass Chrome Version 68.0 und höher das Laden von Bildern verhindert, wenn das übergeordnete Element mit „display:none“ ausgeblendet wird.

Alternative Lösungen:

Wenn Das Verhindern des Ladens ist von entscheidender Bedeutung. Zu den alternativen Methoden gehören:

• Entfernen des Element aus dem Dokument
• Festlegen des src-Attributs auf „data:“ oder „about:blank“

Einschränkungen:

"Anzeige : none verhindert nicht das Laden von Bildern, wenn das Bild ohne verzögertes Laden auf dem ersten Bildschirm angezeigt wird. In diesem Szenario wird das Bild geladen, bleibt aber ausgeblendet.

Das obige ist der detaillierte Inhalt vonVerhindert „display:none' wirklich das Laden von Bildern auf Mobilgeräten?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!