WeChat ミニ プログラムに画像の遅延読み込み効果を実装する

WeChat ミニ プログラムで画像の遅延読み込み効果を実現するには、特定のコード サンプルが必要です。

モバイル インターネットの急速な発展に伴い、WeChat ミニ プログラムは人々の生活に欠かせないもの。 WeChat ミニ プログラムを開発する場合、画像の遅延読み込みは一般的な要件であり、これによりミニ プログラムの読み込み速度とユーザー エクスペリエンスが効果的に向上します。この記事では、WeChat ミニ プログラムで画像の遅延読み込みを実装する方法と具体的なコード例を紹介します。

画像の遅延読み込みとは何ですか?

画像の遅延読み込みとは、ページ上の画像の読み込みを遅らせることを指し、画像がユーザーの可視範囲に入ったときにのみ読み込みを開始するため、初期読み込み時間とネットワーク リクエストの数が削減されます。 WeChat アプレットでは、ページ スクロール イベントをリッスンし、IntersectionObserver API を使用することで、画像の遅延読み込み効果を実現できます。

コード例:

まず、.wxml ファイルで、以下に示すように、遅延ロードする必要があるすべての画像をデフォルトのプレースホルダー画像として設定する必要があります。 #次に、対応する .wxss ファイルで、以下に示すように、プレースホルダー画像のスタイルと遅延ロードする必要がある画像のスタイルを設定します。

<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>

次に、対応する .js ファイルで、以下に示すように、ページ スクロール イベントをリッスンし、Intersection Observer API を使用して、画像が表示範囲に入ったかどうかを判断する必要があります。

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

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

最後に、.wxml ファイルで、以下に示すように、画像の src 属性:

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();
  }
})

上記のコード例を通じて、WeChat アプレットで画像の遅延読み込み効果を実現できます。画像が表示されるまでページをスクロールすると、画像が自動的に読み込まれます。これにより、ミニ プログラムの読み込み速度が向上するだけでなく、トラフィックが節約され、サーバーの負荷が軽減され、ユーザー エクスペリエンスが向上します。

概要:

画像の遅延読み込みは、WeChat アプレット開発でよく使用される手法の 1 つです。ページ スクロール イベントをリッスンし、IntersectionObserver API を使用することで、画像の遅延読み込みを簡単に実装できます。実際の開発では、特定のニーズに応じて画像の遅延読み込みを最適化および拡張できるため、ミニ プログラムのパフォーマンスとユーザー エクスペリエンスがさらに向上します。

以上がWeChat ミニ プログラムに画像の遅延読み込み効果を実装するの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。