Implementieren Sie den Lazy-Loading-Effekt von Bildern in WeChat-Miniprogrammen

Um den Lazy-Loading-Effekt von Bildern in WeChat-Miniprogrammen zu erzielen, sind spezifische Codebeispiele erforderlich

Mit der rasanten Entwicklung des mobilen Internets sind WeChat-Miniprogramme zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. Bei der Entwicklung von WeChat-Miniprogrammen ist das verzögerte Laden von Bildern eine häufige Anforderung, wodurch die Ladegeschwindigkeit und das Benutzererlebnis des Miniprogramms effektiv verbessert werden können. In diesem Artikel wird erläutert, wie das verzögerte Laden von Bildern in WeChat-Miniprogrammen implementiert wird, und es werden spezifische Codebeispiele aufgeführt.

Was ist Lazy Loading von Bildern?

Lazy Loading von Bildern bezieht sich auf die Verzögerung des Ladens von Bildern auf der Seite und beginnt erst mit dem Laden, wenn das Bild in den sichtbaren Bereich des Benutzers gelangt, wodurch die anfängliche Ladezeit und die Anzahl der Netzwerkanforderungen reduziert werden. Im WeChat-Applet kann der Lazy-Loading-Effekt von Bildern durch Abhören von Seiten-Scroll-Ereignissen und Verwendung der IntersectionObserver-API erreicht werden.

Codebeispiel:

Zuerst müssen wir in der .wxml-Datei alle Bilder, die verzögert geladen werden müssen, als Standard-Platzhalterbilder festlegen, wie unten gezeigt:

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

Als nächstes müssen wir in der entsprechenden .wxss-Datei die festlegen Stil des Platzhalterbilds und der Stil des Bilds, das langsam geladen werden muss, wie unten gezeigt:

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

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

Dann müssen wir in der entsprechenden .js-Datei das Seiten-Scroll-Ereignis abhören und die Intersection Observer-API verwenden, um Bestimmen Sie, ob das Bild sichtbar geworden ist Bereich, wie unten gezeigt:

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

Schließlich müssen wir in der .wxml-Datei das src-Attribut des Bildes dynamisch binden, wie unten gezeigt:

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

Durch das obige Codebeispiel haben wir kann das verzögerte Laden von Bildern im WeChat-Applet-Effekt implementieren. Wenn durch die Seite gescrollt wird, bis das Bild sichtbar wird, wird das Bild automatisch geladen. Dies kann nicht nur die Ladegeschwindigkeit von Miniprogrammen verbessern, sondern auch Datenverkehr einsparen und den Serverdruck verringern, was den Benutzern ein besseres Erlebnis bietet.

Zusammenfassung:

Das verzögerte Laden von Bildern ist eine der am häufigsten verwendeten Techniken bei der Entwicklung von WeChat-Miniprogrammen. Durch das Abhören von Seiten-Scroll-Ereignissen und die Verwendung der IntersectionObserver-API können wir das verzögerte Laden von Bildern problemlos implementieren. In der tatsächlichen Entwicklung kann das verzögerte Laden von Bildern entsprechend den spezifischen Anforderungen optimiert und erweitert werden, wodurch die Leistung und das Benutzererlebnis des Miniprogramms weiter verbessert werden.

Das obige ist der detaillierte Inhalt vonImplementieren Sie den Lazy-Loading-Effekt von Bildern in WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!