Comment implémenter le chargement paresseux des images dans l'applet WeChat-js tutoriel-php.cn

Comment implémenter le chargement paresseux des images dans l'applet WeChat

亚连

Libérer： 2018-06-20 17:50:52

original

2835 Les gens l'ont consulté

Cet article présente principalement l'exemple de code pour le chargement paresseux des images dans l'applet WeChat. Le principe de mise en œuvre est de précharger les images via la page, ce qui améliorera l'expérience utilisateur et aura une certaine valeur de référence. Si vous êtes intéressé, vous pouvez. en savoir plus

Cet article présente principalement le chargement paresseux de l'image simulée de l'applet WeChat. Le principe de mise en œuvre est de précharger l'image (image par défaut) via la page, puis d'afficher l'image originale une fois le chargement terminé, plutôt que le vrai chargement paresseux (il y a encore un gros écart avec le chargement paresseux du Web), juste pour améliorer l'expérience utilisateur.

Chargement paresseux de plusieurs images

Page 1.xml

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

Copier après la connexion

Page 2.js

//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
   })
  }
 }

Copier après la connexion

Le ci-dessus, je l'ai compilé pour tout le monde, j'espère qu'il sera utile à tout le monde à l'avenir.