Svelte의 게으른 로딩 이미지

웹 사이트 속도 최적화 팁 중 하나 : 필요할 때만 이미지를 다운로드하십시오 (즉, 이미지가 뷰포트에 들어가는 경우). 이 기술은 한동안 사용되어 왔으며이를 구현하는 방법에 대한 훌륭한 자습서가 많이 있습니다.

그러나 충분한 리소스가 있더라도 게으른 로딩 구현은 프로젝트 또는 프레임 워크에 따라 다릅니다. 이 기사는 교차로 관찰자 API 및 Onload 이벤트를 사용하여 Svelte JavaScript 프레임 워크를 사용하여 게으른 이미지 로딩을 달성합니다.

Svelte 프레임 워크에 익숙하지 않은 경우 Tristram Tokyo의 Svelte 소개를 참조하십시오.

실제 사례

Shop Ireland의 속도 (Svelte 및 Sapper를 기반으로 한 응용 프로그램)를 테스트 할 때이 접근법을 통합했습니다. 우리의 목표는 가능한 빨리 그것을 만드는 것입니다. 브라우저가 화면에 전혀 표시되지 않은 많은 이미지를 다운로드했기 때문에 홈페이지의 성능이 영향을 받았기 때문에 자연스럽게 게으른로드로 바뀌 었습니다.

모든 코드가 사전 컴파일 되었기 때문에 Svelte 자체는 이미 매우 빠릅니다. 그러나 이미지에 게으른 하중을 추가하면 속도가 크게 향상되었습니다.

우리는 프로세스를 함께 완료 할 것입니다. GitHub 에서이 데모의 최종 코드를 얻고 작동 방식에 대한 설명을 읽을 수 있습니다.

최종 효과는 다음과 같습니다.

빠르게 Svelte를 시작하십시오

당신은 이미 벨트 벨트 애플리케이션을 가지고있을 수 있지만, 그렇지 않은 경우, 새로운 svelte 프로젝트를 만들어 로컬로 실행합시다. 입력하다:

 npx degit sveltejs/템플릿 my-svelte-project
CD my-spelte 프로젝트
NPM 설치
NPM Run Dev

이제 http : // localhost : 5000에서 스타터 응용 프로그램을 실행할 수 있어야합니다.

구성 요소 폴더를 추가하십시오

초기 Svelte 데모에는 하나의 앱만이 있으며 아직 구성 요소가 없습니다. 이 데모에 필요한 구성 요소를 설정해 봅시다. 구성 요소 폴더가 없으므로 SRC 폴더에서 하나를 작성하십시오. 이 폴더에서는 이미지 폴더를 만들어 프레젠테이션의 구성 요소를 저장합니다.

우리는 구성 요소가 두 가지 일을하도록 할 것입니다. 먼저 이미지가 뷰포트에 들어가면 확인합니다. 그런 다음 이미지가 들어 오면 이미지를 표시하기 전에 이미지 파일이로드 될 때까지 대기합니다.

첫 번째 구성 요소는 a<intersectionobserver></intersectionobserver> , 그것은 두 번째 구성 요소를 중심으로 진행됩니다<imageloader></imageloader> 패키지. 내가이 설정을 좋아하는 이유는 각 구성 요소가 한 구성 요소에 많은 작업을 포장하지 않고 하나의 작업을 수행하는 데 집중할 수 있기 때문입니다.

가자<intersectionobserver></intersectionobserver> 구성 요소가 시작됩니다.

교차로를 관찰하십시오

우리의 첫 번째 구성 요소는 교차로 관찰자 API의 작업 구현이 될 것입니다. 교차로 관찰자는 꽤 복잡한 것이지만 요점은 자식 요소를 모니터링하고 부모 요소의 경계 상자에 들어갈 때 우리에게 알립니다. 따라서 이미지는 일부 부모 요소의 자식으로 사용될 수 있으며, 시야로 스크롤하면 프롬프트를 미리 알 수 있습니다.

교차로 관찰자 API의 내부를 깊이 파고 들어가는 것이 좋습니다. Travis Almand는 이에 대한 좋은 설명을 가지고 있습니다.

특정 기능을 파헤 치기 전에 먼저 설정하겠습니다. 새 intersectionObserver.svelte 파일을 작성하여 src/components/image 폴더에 넣습니다. 다음 코드를 사용하여 여기서 구성 요소를 정의합니다.

 'svelte'에서 {onmount} 가져 오기;


 내보내기 한 번 = 거짓;
 내보내기하자 상단 = 0;
 내보내기하자 = 0;
 내보내기 왼쪽 = 0;
 내보내기 오른쪽 = 0;


 교도소 = 거짓;
 컨테이너하자;


 onmount (() => {
  if (typeof intersectionObserver! == 'undefined') {
   const rootmargin =`$ {bottom} px $ {left} px $ {top} px $ {right} px`;


   const observer = new intersectionObserver (entries => {
    교차 = 항목 [0] .Sinterecting;
    if (intersecting && 한 번) {
     옵저버 (컨테이너);
    }
   }, {
    루트 마진
   });


   옵저버 .Observe (컨테이너);
   return () => observer.unobserve (컨테이너);
  }

 // 오래된 브라우저 폴백
  기능 핸들러 () {
   const bcr = container.getBoundingClientRect ();


   교차로 = (
    (bcr.bottom bottom)> 0 &&
    (bcr.right)> 0 &&
    (bcr.top -top) <window.innerheight if window.removeeventlistener window.addeventlistener return> window.removeEventListener ( 'scroll', handler);
 });




 div {
  너비 : 100%;
  높이 : 100%;
 }



<div bind:this="{container}">
<slot></slot>
</div></window.innerheight>

이 구성 요소를 다른 구성 요소의 래퍼로 사용할 수 있습니다.이 구성 요소는 랩핑 구성 요소가 뷰포트와 교차하는지 여부를 결정합니다.

Svelte 구성 요소의 구조에 익숙하다면 스크립트로 시작하여 스타일로 들어가서 마커로 끝나는 패턴을 따른다는 것을 알 수 있습니다. 한 번의 속성을 포함하여 전달할 수있는 몇 가지 옵션과 화면 가장자리의 상단, 오른쪽, 하단 및 왼쪽 거리의 값을 설정하여 교차로가 시작되는 위치를 정의합니다.

우리는 거리를 무시하고 대신 한 번의 속성을 사용할 것입니다. 이렇게하면 이미지가 뷰포트에 입력 할 때 이미지가 한 번만로드되도록합니다.

구성 요소의 주요 논리는 Onmount 섹션에 있습니다. 이로 인해 관찰자는 요소가 화면의 가시 영역과 "교차"인지 확인하도록 설정됩니다.

구형 브라우저의 경우 스크롤 이벤트가 첨부되어 스크롤 할 때 요소가 표시되는지 확인한 다음 사용 가능한 경우를 결정하면이 리스너가 제거됩니다.

이미지로드

사용합시다<intersectionobserver></intersectionobserver> 구성 요소가 포장되어 있습니다<imageloader></imageloader> 이미지는 구성 요소 주위에 조건부로로드됩니다. 다시, 이것은 왔습니다<intersectionoberserver></intersectionoberserver> 알림을받는 구성 요소이므로 이미지를로드 할 시간이라는 것을 알고 있습니다.

즉, 구성 요소/이미지에서 새 구성 요소 파일을 작성해야합니다. ImageLoader.svelte를 지명하자. 다음은 그 안에 사용하려는 코드입니다.

 수출하자 SRC
 내보내기 alt


 './intersectionobserver.svelte'에서 IntersectionObserver 가져 오기
 './image.svelte'에서 이미지 가져 오기
 



<intersectionobserver let:intersecting="{intersecting}" once="{true}">
 {#IF 교차}
<image src="%7Bsrc%7D" alt="{alt}"></image>
 {/만약에}
</intersectionobserver>

이 구성 요소는 이미지 관련 속성 (SRC 및 Alt)을 사용하여 이미지의 실제 마크 업을 생성하는 데 사용합니다. 스크립트 섹션에서 방금 만든 구성 요소를 포함하여 두 가지 구성 요소를 가져 왔습니다.<intersectionobserver></intersectionobserver> 그리고 다른 명명<image></image> 우리가 아직 생성하지 않은 구성 요소는 나중에 다룰 것입니다.

<intersectionobserver></intersectionobserver> 역할을함으로써<image></image> 구성 요소 랩퍼가 작동합니다. 속성을 확인하십시오. 우리는 한 번 진정으로 설정하여 이미지가 처음 볼 때만로드됩니다.

그런 다음 Svelte의 슬롯 속성을 사용합니다. 그들은 무엇입니까? 다음에 소개합시다.

슬롯 속성을 사용하여 값을 전달합니다

우리처럼<intersectionobserver></intersectionobserver> 이러한 래퍼 구성 요소는 속성을 포함하는 하위 구성 요소로 전달하는 데 매우 편리합니다. Svelte는이를 달성하기 위해 슬롯 속성 이라는 것을 제공합니다.

우리에서<intersectionobserver></intersectionobserver> 구성 요소 에서이 줄을 발견했을 수 있습니다.

<slot></slot>

이것은 교차 속성을 우리가 제공하는 모든 구성 요소에 전달합니다. 이 경우 우리<imageloader></imageloader> 구성 요소는 래퍼를 사용할 때이 속성을 수신합니다. 우리는 다음과 같이 속성에 액세스하기 위해 let : intersecting = {intersecting}을 사용합니다.

<intersectionobserver let:intersecting="{intersecting}" once="{true}"></intersectionobserver>

그런 다음 교차 값을 사용하여로드시기를 결정할 수 있습니다.<image></image> 구성 요소. 이 경우, IF 조건을 사용하여로드 중일 시점을 확인합니다.

<intersectionobserver let:intersecting="{intersecting}" once="{true}">
 {#IF 교차}
<image src="%7Bsrc%7D" alt="{alt}"></image>
 {/만약에}
</intersectionobserver>

십자가가 발생하면로드하십시오<image></image> ALT 및 SRC 속성을받습니다. 이 벨트 튜토리얼에서 슬롯 속성에 대한 자세한 내용을 알 수 있습니다.

이제 이미지가 화면에 스크롤 할 때 디스플레이 코드를 준비했습니다.<image></image> 구성 요소. 마침내 구성 요소 구축을 시작합시다.

로드 할 때 이미지를 표시합니다

예, 당신은 그것을 추측했습니다 : image.svelte 파일을 구성 요소/이미지 폴더에 추가하겠습니다.<image></image> 구성 요소. 이것은 ALT 및 SRC 속성을 취해 IMG 요소에 설정하는 구성 요소입니다.

다음은 구성 요소 코드입니다.

 수출하자 SRC
 내보내기 alt


 'svelte'에서 {onmount} 가져 오기


 로드하자 = 거짓
 이 이미지를 보자


 onmount (() => {
  thisimage.onload = () => {
   로드 = 참
  }
 }) 






 img {
  높이 : 200px;
  불투명도 : 0;
  전환 : 불투명도 1200ms 편의;
 }
 img.loaded {
  불투명도 : 1;
 }



<img src="/static/imghw/default1.png" data-src="https://img.php.cn/" class="lazy" alt="Svelte의 게으른 로딩 이미지">

데모를 다시 확인하십시오.

Github 에서이 데모의 전체 코드를 다운로드 할 수 있습니다. 제작 사이트에서 어떻게 작동하는지보고 싶다면 내 Shop Ireland 프로젝트를 확인하십시오. 게으른로드는 홈페이지, 카테고리 페이지 및 검색 페이지에 사용되어 속도를 높이는 데 사용됩니다. 나는 당신이 당신의 자신의 벨트 프로젝트에 사용할 수 있기를 바랍니다!

위 내용은 Svelte의 게으른 로딩 이미지의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!