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

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>

Page 2.js

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

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

Articles connexes :

Sélection de cases à cocher et exemples de transmission de valeurs dans jQuery+SpringMVC_jquery

À propos du parent et du fils de Vue2.0 Implémentation du mécanisme de répartition entre les composants (tutoriel détaillé)

Comment implémenter le rendu côté serveur à l'aide de vue-ssr

Comment utiliser l'historique dans React-Router Control routage (tuto détaillé)

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!