HTML에서 이미지에 대한 기본 게으른 하중 구현

Native Lazy Loading은 브라우저의 내장 기능으로 <img alt="HTML에서 이미지에 대한 기본 게으른 하중 구현" > 태그에 로딩 = "Lazy"속성을 추가하여 사진의 게으른로드를 가능하게합니다. 1. JavaScript 또는 타사 라이브러리가 필요하지 않으며 HTML에서 직접 사용됩니다. 2. 페이지 아래의 첫 번째 화면에 표시되지 않은 그림, 사진 갤러리 스크롤 추가 및 큰 그림 리소스에 적합합니다. 3. 첫 번째 화면 또는 디스플레이 인 사진에는 적합하지 않습니다. 4. 그것을 사용할 때는 레이아웃 지터를 피하기 위해 적합한 자리 표시자를 설정해야합니다. 5. SRCSET 및 크기 속성과 함께 반응 형 이미지 로딩을 최적화해야합니다. 6. 호환성 문제를 고려해야합니다. 일부 오래된 브라우저는이를 지원하지 않으며 JavaScript 솔루션을 백업으로 감지하고 결합하는 데 사용될 수 있습니다.

이제 대부분의 웹 페이지는 이미지를 사용하고 이미지 로딩 속도는 사용자 경험에 직접적인 영향을 미칩니다. 기본 게으른로드는 뷰포트에 들어갈 때까지 페이지의 이미지로드를 지연시켜 페이지 성능을 향상시킬 수있는 브라우저 내장 기능입니다.

기본 게으른 하중은 무엇입니까?

기본 게으른 하중은 HTML이 제공하는 기능입니다. <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175225251530134.jpeg" class="lazy" alt="HTML에서 이미지에 대한 기본 게으른 하중 구현" > 태그에 loading="lazy" 속성을 추가하면 브라우저는 이미지의 게으른로드를 자동으로 처리합니다. JavaScript가 필요하지 않으며 타사 라이브러리에 의존하지 않으며 HTML에서 직접 구현할 수 있습니다.

예를 들어:

 <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/000/175225251321232.jpeg"  class="lazy"  src = "example.jpg"alt = "example picture"로드 = "Lazy">

이 접근법은 Chrome, Edge, Firefox 및 Safari (부분적으로 지원되는)를 포함한 대부분의 최신 브라우저에서 작동합니다. 그러나 일부 이전 버전의 브라우저는이를 지원하지 않을 수 있으며 현재 폴백 솔루션을 고려해야합니다.

기본 게으른 하중을 사용하는 데 어떤 상황에서 적합합니까?

모든 이미지가 게으른 하중을 가능하게하는 것은 아닙니다. 다음 상황은 특히 적합합니다.

• 페이지 하단의 첫 번째 화면에 이미지가 표시되지 않습니다. 예를 들어 기사의 중간 또는 하단의 그림과 같은 이미지.
• 사진 갤러리에서 추가 기능을 스크롤하십시오 : 사용자가 아래로 스크롤 할 때만 볼 수있는 콘텐츠.
• 큰 이미지 리소스 : 크기가 커지고 로딩 시간이 길어지는 이미지는 지연된 로딩의 가치가 있습니다.

부적합한 시나리오는 다음과 같습니다.

• 홈 화면 사진 : 첫 번째 로딩 경험에 영향을 미칩니다.
• <img alt="HTML에서 이미지에 대한 기본 게으른 하중 구현" > display: none 이미지가 없음 : 게으른 로딩 동작은 예측할 수 없을 수 있습니다.

기본 게으른 하중을 올바르게 사용하는 방법은 무엇입니까?

실제로 사용하기가 매우 간단합니다. <img alt="HTML에서 이미지에 대한 기본 게으른 하중 구현" > 태그에 loading="lazy" 추가하십시오. 그러나 최상의 결과를 보장하기 위해 일부 세부 사항은 다음에주의를 기울여야합니다.

올바른 자리 표시자를 설정하십시오

이미지가 고정 높이 또는 너비로 설정되지 않으면 레이아웃 스래싱이 발생할 수 있습니다. 그림 컨테이너의 최소 높이를 설정하거나 CSS를 사용하여 종횡비를 지정하는 것이 좋습니다.

예를 들어:

 IMG [로드 = "게으른"] {
  너비 : 100%;
  높이 : 자동;
  Min-Height : 200px;
}

SRCSET 및 크기 특성 결합

이미지가 반응 형 디자인을 지원하는 경우 srcset 및 sizes 로이를 사용하여 브라우저가 게으른로드 특성을 유지하면서 장치 크기에 따라 가장 적합한 이미지 소스를 선택하도록하십시오.

예:

 <img 
  src = "small.jpg" 
  srcset = "small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" 
  크기 = "(최대 폭 : 600px) 480px, 800px" 
  alt = "반응 형 그림" 
  로딩 = "게으른"
>

호환성 문제를 고려하십시오

주류 브라우저는 이미 지원되었지만 일부 기존 시스템 또는 하위 버전 브라우저에서 loading="lazy" 무시됩니다. 더 나은 호환성을 위해 JavaScript Lazy Loading 라이브러리를 폴백 솔루션으로 결합하거나 지원되는 환경에서만 가능하게 할 수 있습니다.

기능 감지를 통해이를 지원하는지 여부를 결정할 수 있습니다.

 if (htmlimageelement.prototype)에서 '로드'{
  // 네이티브 게으른 하중 지원} else {
  // 대신 js scheme 사용}

요약

기본 게으른 하중은 이미지 로딩 성능을 최적화하는 쉽고 효과적인 방법입니다. 올바른 장소에서 사용하고 호환성 및 레이아웃 안정성에주의를 기울이는 한 페이지 로딩 속도를 크게 향상시킬 수 있습니다. 기본적으로 복잡하지는 않지만 세부 사항을 무시하기는 쉽습니다.

위 내용은 HTML에서 이미지에 대한 기본 게으른 하중 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!