So implementieren Sie das verzögerte Laden von responsiven Bildern mithilfe von CSS-Eigenschaften

So implementieren Sie responsives Lazy Loading von Bildern mithilfe von CSS-Eigenschaften

Bei der Webentwicklung stoßen wir häufig auf Situationen, in denen eine große Anzahl von Bildern geladen werden muss, insbesondere auf mobilen Geräten. Um die Seitenladegeschwindigkeit und das Benutzererlebnis zu verbessern, ist das verzögerte Laden von Bildern zu einer gängigen Optimierungsmethode geworden.

Lazy Loading bedeutet, dass beim Laden der Seite nur die Bilder im sichtbaren Bereich geladen werden, anstatt alle Bilder auf der gesamten Seite zu laden. Dies reduziert die für das anfängliche Laden erforderliche Zeit erheblich und vermeidet unnötige Bandbreitenverschwendung.

In diesem Artikel stellen wir die Methode zur Verwendung von CSS-Eigenschaften zum Implementieren von responsivem Lazy Loading von Bildern vor, die auf verschiedene Bildschirmgrößen und Geräte angewendet werden kann.

Zuerst müssen wir die Bilder definieren, die träge in HTML geladen werden müssen. Hier verwenden wir das Element <img alt="So implementieren Sie das verzögerte Laden von responsiven Bildern mithilfe von CSS-Eigenschaften" > und legen ein benutzerdefiniertes Attribut data-src fest, um die tatsächliche URL des Bildes zu speichern. <img alt="So implementieren Sie das verzögerte Laden von responsiven Bildern mithilfe von CSS-Eigenschaften" >元素，并设置一个自定义的属性data-src来存储图像的实际URL。

<img class="lazy-image" data-src="image.jpg" alt="Image" />

接下来，我们需要编写CSS样式来隐藏初始的图像，并通过使用background-size属性设置图像的背景图片。

.lazy-image {
  background-image: url(placeholder.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

在上面的代码中，placeholder.jpg是一个占位图像，用于在实际图像加载完成之前显示。

然后，我们使用CSS属性@media来针对不同的屏幕尺寸定义不同的样式。

/* 对于大屏幕设备，立即加载图像 */
@media screen and (min-width: 1024px) {
  .lazy-image {
    background-image: none;
  }
}

/* 对于小屏幕设备，延迟加载图像 */
@media screen and (max-width: 1023px) {
  .lazy-image {
    visibility: hidden;
  }
  
  .lazy-image[data-src] {
    visibility: visible;
  }
}

在上述代码中，我们使用@media指令将屏幕宽度分为两个范围：大于等于1024px和小于1024px。对于大屏幕设备，我们立即加载图像，将background-image设置为none。对于小屏幕设备，我们将.lazy-image的visibility属性设置为hidden，同时为带有data-src属性的.lazy-image元素设置visibility属性为visible，这样就可以实现延迟加载图像。

最后，我们需要使用JavaScript来实现图像的实际加载。

document.addEventListener("DOMContentLoaded", function() {
  const lazyImages = document.querySelectorAll(".lazy-image");

  const lazyLoad = function() {
    lazyImages.forEach(function(img) {
      if (img.getBoundingClientRect().top <= window.innerHeight && img.hasAttribute("data-src")) {
        img.setAttribute("src", img.getAttribute("data-src"));
        img.removeAttribute("data-src");
      }
    });
  };

  window.addEventListener("scroll", lazyLoad);
  window.addEventListener("resize", lazyLoad);
  window.addEventListener("orientationchange", lazyLoad);
});

上述代码中，我们使用document.querySelectorAll获取所有带有.lazy-image类的元素，并定义一个lazyLoad函数来判断图像是否在可见区域内，如果是则加载图像。

最后，我们将lazyLoadrrreee

Als nächstes müssen wir CSS-Stile schreiben, um das ursprüngliche Bild auszublenden und den Hintergrund des Bildes mithilfe der Eigenschaft background-size festzulegen.

rrreee

Im obigen Code ist placeholder.jpg ein Platzhalterbild, das zur Anzeige verwendet wird, bis das eigentliche Bild geladen wird. 🎜🎜Dann verwenden wir das CSS-Attribut @media, um verschiedene Stile für verschiedene Bildschirmgrößen zu definieren. 🎜rrreee🎜Im obigen Code verwenden wir die Anweisung @media, um die Bildschirmbreite in zwei Bereiche zu unterteilen: größer oder gleich 1024 Pixel und kleiner als 1024 Pixel. Bei Geräten mit großem Bildschirm laden wir das Bild sofort und setzen background-image auf none. Für Geräte mit kleinem Bildschirm setzen wir das Attribut visibility von .lazy-image auf hidden und setzen das Attribut data-src.lazy-image-Element des /code>-Attributs setzt das visibility-Attribut auf visible, sodass ein verzögertes Laden von Bildern erreicht werden kann. 🎜🎜Schließlich müssen wir JavaScript verwenden, um das Bild tatsächlich zu laden. 🎜rrreee🎜Im obigen Code verwenden wir document.querySelectorAll, um alle Elemente mit der Klasse .lazy-image abzurufen und eine lazyLoad-Funktion zu definieren Um festzustellen, ob sich das Bild im sichtbaren Bereich befindet, laden Sie ggf. das Bild. 🎜🎜Schließlich binden wir die Funktion lazyLoad an die Browser-Scroll-, Fenstergrößen- und Bildschirmausrichtungsänderungsereignisse, sodass die Ladefunktion ausgelöst wird, wenn die Seite scrollt oder ihre Größe ändert. 🎜🎜Das Obige ist die Methode und das entsprechende Codebeispiel für die Verwendung von CSS-Eigenschaften zum Implementieren des verzögerten Ladens reaktionsfähiger Bilder. Mit dieser Methode können wir die Ladegeschwindigkeit von Webseiten optimieren, das Benutzererlebnis verbessern und unnötige Bandbreitenverschwendung vermeiden. 🎜

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das verzögerte Laden von responsiven Bildern mithilfe von CSS-Eigenschaften. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!