HTML, CSS, jQuery: 이미지 지연 로딩에 대한 팁

HTML, CSS 및 jQuery: 이미지의 지연 로딩 구현을 위한 팁

현대 웹사이트에서 이미지의 지연 로딩은 일반적으로 사용되는 최적화 기술로, 웹사이트의 로딩 성능을 향상시키고 서버의 부하를 줄일 수 있습니다. . 이미지를 지연 로딩하면 사용자가 표시 영역으로 스크롤할 때만 이미지를 로드하여 대역폭을 절약하고 페이지 로딩 속도를 높일 수 있습니다. 이 기사에서는 HTML, CSS 및 jQuery를 사용하여 이미지 지연 로딩을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

1. HTML 구조
먼저 HTML에서 지연 로드가 필요한 각 이미지에 대해 자리 표시자를 추가해야 합니다. 이 자리 표시자는 일반 div 요소일 수 있으며 CSS 스타일을 사용하여 페이지를 유지 관리합니다. 레이아웃이 안정적입니다.

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

위 코드에서 image-container는 이미지의 컨테이너를 나타내고, placeholder는 이미지가 로드되기 전에 표시될 자리 표시자입니다. img 태그의 data-src 속성은 이미지의 실제 주소를 저장하는 반면, alt 속성은 이미지에 대한 대체 텍스트를 제공합니다. 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

다음으로 자리 표시자와 이미지에 대한 몇 가지 CSS 스타일을 설정해야 합니다.

위 코드에서 .image-container는 상대 위치 지정을 사용하여 너비를 100%, 높이를 0으로 설정하고 padding-bottom을 통해 설정합니다. 속성 특정 요구에 따라 조정될 수 있는 높이 비율입니다. .placeholder는 절대 위치를 설정하고, 전체 컨테이너를 채우고, 배경색을 설정합니다. img는 절대 위치를 설정하고 이미지를 컨테이너의 왼쪽 상단에 배치하며 너비와 높이를 100%로 설정하고 object-fit을 사용하여 비율을 유지합니다. 이미지, 초기 상태 투명도를 0으로 낮추고 전환 효과를 추가합니다.

위 내용은 HTML, CSS, jQuery: 이미지 지연 로딩에 대한 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!