So implementieren Sie das verzögerte Laden von Bildern im WeChat-Applet

In diesem Artikel wird hauptsächlich der Beispielcode für das verzögerte Laden von Bildern im WeChat-Applet vorgestellt. Das Prinzip der Implementierung besteht darin, Bilder vorab über die Seite zu laden, was die Benutzererfahrung verbessert und einen gewissen Referenzwert hat Erfahren Sie mehr

In diesem Artikel wird hauptsächlich das simulierte verzögerte Laden von Bildern im WeChat-Applet vorgestellt. Das Prinzip der Implementierung besteht darin, das Bild (Standardbild) vorab über die Seite zu laden und dann das Originalbild anzuzeigen abgeschlossen, anstatt Lazy Loading im eigentlichen Sinne (Es gibt immer noch eine große Lücke beim Lazy Loading im Web), nur um das Benutzererlebnis zu verbessern.

Verzögertes Laden mehrerer Bilder

1.xml-Seite

<block wx:for="{{list}}" wx:key="">
  <image class=&#39;relative width-100 mgb-20 fade_in&#39; src=&#39;{{item.cover_url}}&#39; mode=&#39;widthFix&#39; style=&#39;display:none&#39; bindload="_imgOnLoad" id=&#39;{{item.cover_url}}&#39;></image>
   <view class=&#39;tag-bg {{item.checked?"tag-bg1":""}}&#39;></view>
   <view class=&#39;tag-text fz-30 fwb&#39;>{{item.type_name}}</view>
   <image class=&#39;relative width-100 mgb-20 fade_in {{item.loaded?"":"loading-img"}}&#39; src=&#39;{{item.loaded?item.cover_url:item.url}}&#39; mode=&#39;widthFix&#39;></image>
 </block>

2.js-Seite

//ajax请求数据
onLoad: function () {
  var that = this
  var page = that.data.page
  wx.request({
   url: request_url,
   data: {
    'signature': signature,
    'page':1,
    'pageSize': 2
   },
   success: function (res) {
    let list = res.data.content
    for (var i = 0; i < list.length; i++) {
     list[i].url = "../../img/771.gif" //用json的格式创建url，作为加载过度图片
    }
    that.setData({
     list: list,
    })
   }
  })
 },

//监听图片加载页面
 _imgOnLoad: function (e) {
  // console.log(e)
  var loadedUrl = e.target.id
  let that = this
  let list = that.data.list
  for (var i = 0; i < list.length; i++) {
   if (list[i].cover_url == loadedUrl) {
    list[i].loaded = true
   }
   that.setData({
    list
   })
  }
 }

Das Obige ist, was ich zusammengestellt für alle Ja, ich hoffe, es wird in Zukunft für alle hilfreich sein.

Verwandte Artikel:

Beispiele für die Auswahl von Kontrollkästchen und die Wertübergabe in jQuery+SpringMVC_jquery

Über Vue2.0 Parent und Son, die den Versandmechanismus implementieren zwischen Komponenten (ausführliches Tutorial)

So implementieren Sie serverseitiges Rendering mit vue-ssr

So verwenden Sie den Verlauf in der React-Router-Steuerung Routing (ausführliches Tutorial)

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das verzögerte Laden von Bildern im WeChat-Applet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!