WeChat 미니 프로그램에서 이미지의 지연 로딩 효과 구현

WeChat 미니 프로그램에서 이미지의 지연 로딩 효과를 얻으려면 특정 코드 예제가 필요합니다.

모바일 인터넷의 급속한 발전으로 WeChat 미니 프로그램은 사람들의 삶에 없어서는 안될 부분이 되었습니다. WeChat 미니 프로그램을 개발할 때 이미지의 지연 로딩은 일반적인 요구 사항이며, 이는 미니 프로그램의 로딩 속도와 사용자 경험을 효과적으로 향상시킬 수 있습니다. 이 기사에서는 WeChat 미니 프로그램에서 이미지 지연 로딩을 구현하는 방법을 소개하고 구체적인 코드 예제를 제공합니다.

이미지 지연 로딩이란 무엇인가요?

이미지 지연 로딩이란 페이지에서 이미지 로딩을 지연시키는 것을 말하며, 이미지가 사용자의 가시 범위에 들어올 때만 로딩을 시작하므로 초기 로딩 시간과 네트워크 요청 횟수가 줄어듭니다. WeChat 애플릿에서는 페이지 스크롤 이벤트를 수신하고 IntersectionObserver API를 사용하여 이미지의 지연 로딩 효과를 얻을 수 있습니다.

코드 예:

먼저 .wxml 파일에서 아래와 같이 지연 로드해야 하는 모든 이미지를 기본 자리 표시자 이미지로 설정해야 합니다.

<view class="container">
  <image class="img" src="/images/placeholder.png"/>
  <image class="img" src="/images/placeholder.png"/>
  <image class="img" src="/images/placeholder.png"/>
  ...
</view>

다음으로 해당 .wxss 파일에서 플레이스홀더 이미지의 스타일과 느리게 로드되어야 하는 이미지의 스타일은 아래와 같습니다.

.container {
  display: flex;
  flex-direction: column;
}

.img {
  width: 100%;
  height: 200rpx;
  margin-bottom: 20rpx;
  background-color: #eee;
}

그런 다음 해당 .js 파일에서 페이지 스크롤 이벤트를 수신하고 Intersection Observer API를 사용하여 다음을 수행해야 합니다. 아래와 같이 이미지가 표시 범위가 되었는지 확인합니다.

Page({
  data: {
    lazyLoadImgs: [
      "/images/img1.png",
      "/images/img2.png",
      "/images/img3.png",
      ...
    ]
  },
  onReady: function() {
    // 创建IntersectionObserver实例
    this.IntersectionObserver = wx.createIntersectionObserver(this);
    
    // 监听需要懒加载的图片
    this.IntersectionObserver.relativeToViewport().observe('.img', (res) => {
      if (res.intersectionRatio > 0) {
        // 图片进入了可见范围，开始加载图片
        const index = res.dataset.index;
        const lazyLoadImgs = this.data.lazyLoadImgs;
        lazyLoadImgs[index] = res.dataset.src;
        this.setData({
          lazyLoadImgs: lazyLoadImgs
        });
      }
    });
  },
  onUnload: function() {
    // 组件销毁时，停止监听
    this.IntersectionObserver.disconnect();
  }
})

마지막으로 .wxml 파일에서 아래와 같이 이미지의 src 속성을 동적으로 바인딩해야 합니다.

<view class="container">
  <image class="img" src="{{lazyLoadImgs[0]}}"/>
  <image class="img" src="{{lazyLoadImgs[1]}}"/>
  <image class="img" src="{{lazyLoadImgs[2]}}"/>
  ...
</view>

위의 코드 예제를 통해 우리는 WeChat 애플릿 효과에서 이미지 지연 로딩을 구현할 수 있습니다. 이미지가 보일 때까지 페이지를 스크롤하면 이미지가 자동으로 로드됩니다. 이는 미니 프로그램의 로딩 속도를 향상시킬 뿐만 아니라 트래픽을 절약하고 서버 부담을 줄여 사용자에게 더 나은 경험을 제공합니다.

요약:

이미지 지연 로딩은 WeChat 미니 프로그램 개발에서 일반적으로 사용되는 기술 중 하나입니다. 페이지 스크롤 이벤트를 수신하고 IntersectionObserver API를 사용하면 이미지 지연 로딩을 쉽게 구현할 수 있습니다. 실제 개발에서는 특정 요구에 따라 이미지의 지연 로딩을 최적화하고 확장할 수 있으므로 미니 프로그램의 성능과 사용자 경험이 더욱 향상됩니다.

위 내용은 WeChat 미니 프로그램에서 이미지의 지연 로딩 효과 구현의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!