Laksanakan kesan pemuatan malas imej dalam program mini WeChat

Untuk mencapai kesan pemuatan malas imej dalam program mini WeChat, contoh kod khusus diperlukan

Dengan perkembangan pesat Internet mudah alih, program mini WeChat telah menjadi bahagian yang amat diperlukan dalam kehidupan orang ramai. Apabila membangunkan program mini WeChat, pemuatan malas imej adalah keperluan biasa, yang boleh meningkatkan kelajuan pemuatan dan pengalaman pengguna program mini dengan berkesan. Artikel ini akan memperkenalkan cara melaksanakan pemuatan malas imej dalam program mini WeChat dan memberikan contoh kod khusus.

Apakah malas memuatkan imej?

Pemuatan malas imej merujuk kepada penangguhan pemuatan imej pada halaman, dan hanya mula dimuatkan apabila imej memasuki julat yang boleh dilihat pengguna, sekali gus mengurangkan masa pemuatan awal dan bilangan permintaan rangkaian. Dalam applet WeChat, kesan pemuatan malas imej boleh dicapai dengan mendengar acara tatal halaman dan menggunakan API IntersectionObserver.

Contoh kod:

Pertama, dalam fail .wxml, kita perlu menetapkan semua imej yang perlu malas dimuatkan sebagai imej pemegang tempat lalai, seperti yang ditunjukkan di bawah:

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

Seterusnya, dalam fail .wxss yang sepadan, Tetapkan gaya imej pemegang tempat dan gaya imej yang perlu dimuatkan dengan malas, seperti yang ditunjukkan di bawah:

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

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

Kemudian, dalam fail .js yang sepadan, kita perlu mendengar acara tatal halaman dan menggunakan Intersection Observer API untuk tentukan sama ada imej telah menjadi Julat kelihatan, seperti yang ditunjukkan di bawah:

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

Akhir sekali, dalam fail .wxml, kita perlu mengikat atribut src imej secara dinamik, seperti yang ditunjukkan di bawah:

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

Melalui contoh kod di atas, kita boleh melaksanakan pemuatan malas imej dalam Kesan applet WeChat. Apabila halaman ditatal sehingga imej kelihatan, imej akan dimuatkan secara automatik. Ini bukan sahaja dapat meningkatkan kelajuan memuatkan program mini, tetapi juga menjimatkan trafik dan mengurangkan tekanan pelayan, memberikan pengguna pengalaman yang lebih baik.

Ringkasan:

Malas memuatkan imej adalah salah satu teknik yang biasa digunakan dalam pembangunan program mini WeChat. Dengan mendengar acara tatal halaman dan menggunakan API IntersectionObserver, kami boleh melaksanakan pemuatan imej yang malas dengan mudah. Dalam pembangunan sebenar, pemuatan malas imej boleh dioptimumkan dan dikembangkan mengikut keperluan khusus, dengan itu meningkatkan lagi prestasi dan pengalaman pengguna program mini.

Atas ialah kandungan terperinci Laksanakan kesan pemuatan malas imej dalam program mini WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!