Heim > Web-Frontend > js-Tutorial > So implementieren Sie das verzögerte Laden von Bildern im WeChat-Applet

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

亚连
Freigeben: 2018-06-20 17:50:52
Original
2899 Leute haben es durchsucht

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>
Nach dem Login kopieren

2.js-Seite

//ajax请求数据
onLoad: function () {
  var that = this
  var page = that.data.page
  wx.request({
   url: request_url,
   data: {
    &#39;signature&#39;: signature,
    &#39;page&#39;:1,
    &#39;pageSize&#39;: 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
   })
  }
 }
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage