How to implement lazy loading of images in WeChat applet

This article mainly introduces the sample code for lazy loading of images in WeChat applet. The principle of implementation is to preload images through the page, which will improve the user experience and has certain reference value. If you are interested, you can learn more

This article mainly introduces the simulated image lazy loading of WeChat applet. The principle of implementation is to preload the image (default image) through the page, and then display the original image after the loading is completed, rather than the real lazy loading. (There is still a big gap with the lazy loading of the web), just to improve the user experience.

Lazy loading of multiple pictures

1.xml page

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

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

The above is what I compiled for everyone Yes, I hope it will be helpful to everyone in the future.

Related articles:

Check box selection and value passing examples in jQuery SpringMVC_jquery

About Vue2.0 parent-child components Implement dispatch mechanism in time (detailed tutorial)

How to implement server-side rendering using vue-ssr

How to use history control in react-router Routing (detailed tutorial)

The above is the detailed content of How to implement lazy loading of images in WeChat applet. For more information, please follow other related articles on the PHP Chinese website!