HTML, CSS und jQuery: Tipps zum verzögerten Laden von Bildern

HTML, CSS und jQuery: Tipps zum Implementieren des verzögerten Ladens von Bildern

Auf modernen Websites ist das verzögerte Laden von Bildern eine häufig verwendete Optimierungstechnik, die die Ladeleistung der Website verbessern und die Belastung des Servers verringern kann . Durch das verzögerte Laden von Bildern können Sie Bandbreite sparen und das Laden von Seiten beschleunigen, indem Sie Bilder nur dann laden, wenn der Benutzer zum sichtbaren Bereich scrollt. In diesem Artikel wird erläutert, wie Sie mithilfe von HTML, CSS und jQuery das verzögerte Laden von Bildern implementieren, und es werden spezifische Codebeispiele bereitgestellt.

1. HTML-Struktur
Zunächst müssen wir für jedes Bild, das verzögert geladen werden muss, einen Platzhalter hinzufügen und CSS-Stile verwenden, um die Breite und Höhe der Seite festzulegen Das Layout ist stabil.

<div class="image-container">
  <div class="placeholder"></div>
  <img data-src="image.jpg" alt="Image">
</div>

Im obigen Code stellt image-container den Container des Bildes dar und placeholder ist ein Platzhalter, der angezeigt wird, bevor das Bild geladen wird. Das Attribut data-src des Tags img speichert die tatsächliche Adresse des Bildes, während das Attribut alt alternativen Text für das Bild bereitstellt. image-container表示图片的容器，placeholder是一个占位符，在图像加载之前会显示。img标签的data-src属性存储图像的真实地址，而alt属性则为图像提供替代文本。

二、CSS样式
接下来，我们需要为占位符和图像设置一些CSS样式。

.image-container {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%; /* 设置高度占比 */
}

.placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #f3f3f3; /* 设置占位符背景颜色 */
}

img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 等比例缩放填充容器 */
  opacity: 0; /* 图像透明度为0，初始状态不显示 */
  transition: opacity 0.3s ease; /* 添加过渡效果 */
}

在上述代码中，.image-container使用了相对定位，设置了宽度为100%，高度为0，并通过padding-bottom属性设置了一个高度占比，可以根据具体需求进行调整。.placeholder设置了绝对定位，占满整个容器，并设置了背景颜色。img设置了绝对定位，将图像放置到容器的左上角，设置了宽度和高度为100%并使用object-fit来保持图像的比例，初始状态下透明度为0，并添加了过渡效果。

三、jQuery懒加载
最后，我们使用jQuery来实现图像的懒加载。需要在页面加载完毕后，当用户滚动到可见区域时，将图像的data-src属性值赋给src属性，并将透明度改为1，实现图像的显示。

$(window).on('scroll', function () {
  $('.image-container').each(function () {
    if ($(this).offset().top < $(window).scrollTop() + $(window).height()) {
      var $img = $(this).find('img');
      $img.attr('src', $img.data('src'));
      $img.css('opacity', 1);
    }
  });
});

上述代码中，当用户滚动页面时，使用offset().top获取每个图像容器的顶部位置，与scrollTop()和height()比较，判断是否已经滚动到可见区域。如果是，则将图像的data-src属性值赋给src

Als nächstes müssen wir einige CSS-Stile für Platzhalter und Bilder festlegen.

Im obigen Code verwendet .image-container die relative Positionierung, setzt die Breite auf 100 %, die Höhe auf 0 und legt sie über den padding-bottom fest Attribut Ein Höhenverhältnis, das je nach Bedarf angepasst werden kann. .placeholder legt die absolute Positionierung fest, füllt den gesamten Container und legt die Hintergrundfarbe fest. img legt die absolute Positionierung fest, platziert das Bild in der oberen linken Ecke des Containers, setzt die Breite und Höhe auf 100 % und verwendet object-fit, um die Proportionen des Bildes beizubehalten Bild, Ausgangszustand Verringern Sie die Transparenz auf 0 und fügen Sie einen Übergangseffekt hinzu.

Das obige ist der detaillierte Inhalt vonHTML, CSS und jQuery: Tipps zum verzögerten Laden von Bildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!