Heim > Web-Frontend > CSS-Tutorial > Verhindert „display:none' wirklich das Laden von Bildern auf Mobilgeräten?

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

DDD
Freigeben: 2024-12-20 12:05:11
Original
667 Leute haben es durchsucht

Does `display:none` Really Stop Images from Loading on Mobile Devices?

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!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage