자신의 게으른 하중을 굴리기위한 팁

웹 페이지 이미지의 게으른로드를 효율적으로 구현 : 응답 성과 성능을 모두 고려합니다.

웹 페이지 성능을 최적화하기 위해 게으른 이미지로드를 고려한 적이 있습니까? 게으른로드 기술은 초기 페이지의 부하 중량을 효과적으로 줄이고 웹 페이지의 로딩 속도를 향상시킬 수 있습니다. 이 기사는 효율적인 이미지 게으른 로딩 방법을 탐색하면서 반응 형 이미지와 최상의 사용자 경험을 고려할 것입니다.

Lazy Loading은 브라우저 기본 기능이 아니며 현재 JavaScript의 도움으로 구현해야합니다. Chrome 75 및 후속 버전은 이미지 및 Iframes의 게으른로드를 기본적으로 지원할 계획이지만 다른 브라우저와 호환 되려면 여전히 JavaScript 솔루션을 사용해야합니다. 많은 정적 웹 사이트 생성기, 라이브러리 및 프레임 워크가 기간 동안 게으른로드 기능을 제공하지만이 기능을 구현하기 위해 전체 라이브러리 또는 프레임 워크를 도입하면 성능 오버 헤드가 발생할 수 있습니다. 따라서 우리는 스스로 게으른 짐을 구현하기로 결정했습니다.

핵심 메커니즘 :

대부분의 게으른 로딩 방법은 다음 패턴을 따릅니다.

1. HTML 태그 : 사용 <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174502705448368.jpg" class="lazy" alt="자신의 게으른 하중을 굴리기위한 팁">

2. 로드 시간 : Intersection Observer API를 사용하여 이미지가 뷰포트에 들어가는 지 여부를 감지하십시오. Intersection Observer 효율적인 요소 가시성 감지를 제공하여 자주 scroll 피하고 이벤트 청취를 resize .

// 교차로 관찰자를 만듭니다
const observer = new intersectionObserver (lazyload, {
  rootmargin : '100px',
  임계 값 : 1.0
});

함수 lazyload (요소) {
  elements.foreach (image => {
    if (image.intersectionRatio> 0) {
      image.src = image.dataset.src;
      옵저버 (이미지);
    }
  });
}

// "Lazy"클래스가있는 모든 IMG 요소를 관찰하십시오. const lazyimages = document.querySelectorAll ( 'img.lazy');
LazyImages.foreach (img => {
  Observer.observe (IMG);
});

개선 및 최적화 :

위의 기본 방법에는 몇 가지 단점이 있습니다.

1. JavaScript 종속성 : JavaScript가로드되고 실행될 때까지 이미지를 표시 할 수 없습니다.
2. 시각적 비트 : 그림이로드되기 전에 페이지가 비어있어 시각적 불만이 발생할 수 있습니다.

위의 문제에 대한 응답으로 다음과 같은 개선을했습니다.

1. 기본 게으른 부하 감지 : 기능 감지를 사용하여 브라우저가 기본 loading="lazy" 속성을 지원하는지 여부를 결정합니다. 지원되는 경우 JavaScript 개입없이 직접 사용하십시오.

if (htmlimageelement.prototype)에서 '로드'{
  document.querySelectorall ( 'img.lazy'). foreach (img => img.src = img.dataset.src);
} 또 다른 {
  // 교차로 관찰자를 사용하여 게으른로드를 구현}}

2. 자리 표시 자 맵 및 CSS 전환 : 초기 상태로 작은 크기의 자리 표시 자 맵을 사용하고 CSS를 사용하여 스케일 및 블러를 사용하여 이미지를로드 한 후 블러 효과를 제거하여 원활한 전환을 달성합니다.

<picture>
  <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/174502705554652.jpg" class="lazy" alt="자신의 게으른 하중을 굴리기위한 팁">
</picture>

그림 {너비 : 100%; 오버플로 : 숨겨진; }
그림 img {너비 : 100%; 전환 : 필터 0.5S; }
picture.lazy img {필터 : 블러 (20px); }

3. 반응 형 사진 : 사용<picture></picture> 요소와<source></source> 요소는 반응 형 사진을 구현하여 다양한 뷰포트 크기에 따라 다양한 크기의 그림을로드합니다.

보조 도구 :

개발 프로세스를 단순화하기 위해 다음 보조 도구를 사용할 수 있습니다.

1. HTML 생성기 : 세대에 도움이되는 사용자 정의 기능 또는 템플릿 엔진<picture></picture> 요소에 대한 HTML 코드.

2. 이미지 배치 처리 : gulp-image-resize 와 같은 도구를 사용하여 배치 크기의 사진을 일괄 처리하거나 클라우드 서비스 (예 : Netlify 및 Cloudinary)를 사용하여 주문시 사진을 변환합니다.

요약 :

이 기사는 효율적인 이미지 게으른로드 구현 방법을 소개합니다. 기본 게으른 로딩 기능 감지, 자리 표시 자 맵, CSS 전환, 반응 형 사진 및 보조 도구를 결합하면 사용자 경험을 향상시키면서 성능을 보장 할 수 있습니다. 올바른 이미지 처리 방법 (빌드 또는 주문형 변환)을 선택하는 것은 프로젝트 크기 및 요구 사항에 따라 다릅니다. 이 방법은 웹 페이지 로딩 속도를 크게 향상시키고 더 부드러운 시각적 효과를 제공 할 수 있습니다.

위 내용은 자신의 게으른 하중을 굴리기위한 팁의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!