HTML, CSS, jQuery: 이미지 지연 로딩에 대한 팁-JS 튜토리얼-php.cn

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

王林

풀어 주다： 2023-10-24 12:22:55

원래의

723명이 탐색했습니다.

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

2. CSS 스타일

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

rrreee

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

3. jQuery 지연 로딩🎜마지막으로 jQuery를 사용하여 이미지 지연 로딩을 구현합니다. src 속성에 이미지의 data-src 속성 값을 할당하고, 페이지 종료 후 사용자가 보이는 영역으로 스크롤할 때 투명도를 1로 변경해야 합니다. 로드되었습니다. 이미지를 표시합니다. 🎜rrreee🎜위 코드에서 사용자가 페이지를 스크롤할 때 offset().top을 사용하여 각 이미지 컨테이너의 최상위 위치를 가져옵니다. 이는 scrollTop() 및 <code> height()를 비교하여 보이는 영역까지 스크롤되었는지 확인합니다. 그렇다면 이미지의 data-src 속성 값을 src 속성에 할당하고 투명도를 1로 변경하세요. 🎜🎜이제 이미지 지연 로딩 구현이 모두 완료되었습니다. 이러한 기술을 사용하기 전에 jQuery 라이브러리와 위 코드를 포함하여 올바르게 실행되도록 해야 합니다. 🎜🎜요약🎜이 글에서는 HTML, CSS, jQuery를 사용하여 이미지 지연 로딩을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다. 이미지를 느리게 로드하면 웹 페이지의 로딩 성능을 향상시키고 서버 부담을 줄이며 더 나은 사용자 경험을 제공할 수 있습니다. 이 기사가 이미지 지연 로딩 기술을 이해하고 적용하는 데 도움이 되기를 바라며, 웹 사이트를 개발할 때 유용하게 활용되기를 바랍니다. 🎜

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