HTML의 대용량 이미지를 원활하게 로드하기 위한 효율적인 솔루션인 Loadr

작동 방식:

먼저 img src에서 저해상도 이미지를 로드한 다음 hr-src 속성에서 백그라운드에 고해상도 이미지를 로드합니다. 로드되면 저해상도 URL이 고해상도 이미지로 대체됩니다.

스타라면 정말 멋질 것 같은 레포를 확인해 보세요

데모

설치

CDN

CDN을 사용하여 Loadr를 가져옵니다.

index.html

<script src="https://cdn.jsdelivr.net/npm/open-loadr/loadr.min.js"></script>

? 특정 버전

<script src="https://cdn.jsdelivr.net/npm/open-loadr@latest/loadr.min.js"></script>

용법

HTML 에 hr-src를 추가합니다. 요소, 이것이 고해상도 이미지가 됩니다. src 속성에는 이미지의 저해상도 버전이 있습니다. Loadr는 백그라운드에서 고해상도 이미지를 로드한 다음 해당 URL로 src를 업데이트하여 저해상도 이미지를 바꿉니다.

index.html

<img hr-src="https://open-loadr.github.io/loadr/images/the_starry_night/high_res.jpg" src="https://open-loadr.github.io/loadr/images/the_starry_night/low_res.png">

Javascript에서 Loadr를 호출하세요. 그게 다야?.

index.html

<script>
  new Loadr();
</script>

Codepen에서 데모를 확인해보세요.

추가 단계

요소.

style.css

img {
  height: 300px;
  width: 300px;
  object-fit: cover;
  border-radius: 15px;
  overflow: hidden;
}

맞춤화

Loadr에는 쉽게 맞춤설정할 수 있는 변수가 포함되어 있습니다.

<script>
  new Loadr({
    async: false,
    cache: true,
    delay: '750'
  });
</script>

Codepen에서 사용자 정의 데모를 확인하세요.

위 내용은 HTML의 대용량 이미지를 원활하게 로드하기 위한 효율적인 솔루션인 Loadr의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!