Implement the lazy loading effect of images in WeChat mini programs

To achieve the lazy loading effect of images in WeChat mini programs, specific code examples are needed

With the rapid development of the mobile Internet, WeChat mini programs have become an integral part of people’s lives Indispensable part. When developing WeChat mini programs, lazy loading of images is a common requirement, which can effectively improve the loading speed and user experience of the mini program. This article will introduce how to implement lazy loading of images in WeChat mini programs and give specific code examples.

What is lazy loading of images?

Image lazy loading refers to delaying the loading of images on the page, and only starts loading when the image enters the user's visible range, thus reducing the initial loading time and the number of network requests. In the WeChat applet, the lazy loading effect of images can be achieved by listening to page scroll events and using the IntersectionObserver API.

Code example:

First, in the .wxml file, we need to set all images that need to be lazy loaded as default placeholder images, as shown below:

<view class="container">
  <image class="img" src="/images/placeholder.png"/>
  <image class="img" src="/images/placeholder.png"/>
  <image class="img" src="/images/placeholder.png"/>
  ...
</view>

Next, in the corresponding .wxss file, set the style of the placeholder image and the style of the image that needs to be loaded lazily, as shown below:

.container {
  display: flex;
  flex-direction: column;
}

.img {
  width: 100%;
  height: 200rpx;
  margin-bottom: 20rpx;
  background-color: #eee;
}

Then, in the corresponding .js file, we need Listen to the page scroll event and use the Intersection Observer API to determine whether the image has entered the visible range, as shown below:

Page({
  data: {
    lazyLoadImgs: [
      "/images/img1.png",
      "/images/img2.png",
      "/images/img3.png",
      ...
    ]
  },
  onReady: function() {
    // 创建IntersectionObserver实例
    this.IntersectionObserver = wx.createIntersectionObserver(this);
    
    // 监听需要懒加载的图片
    this.IntersectionObserver.relativeToViewport().observe('.img', (res) => {
      if (res.intersectionRatio > 0) {
        // 图片进入了可见范围，开始加载图片
        const index = res.dataset.index;
        const lazyLoadImgs = this.data.lazyLoadImgs;
        lazyLoadImgs[index] = res.dataset.src;
        this.setData({
          lazyLoadImgs: lazyLoadImgs
        });
      }
    });
  },
  onUnload: function() {
    // 组件销毁时，停止监听
    this.IntersectionObserver.disconnect();
  }
})

Finally, in the .wxml file, we need to dynamically bind the src attribute of the image, as shown below :

<view class="container">
  <image class="img" src="{{lazyLoadImgs[0]}}"/>
  <image class="img" src="{{lazyLoadImgs[1]}}"/>
  <image class="img" src="{{lazyLoadImgs[2]}}"/>
  ...
</view>

Through the above code example, we can achieve the lazy loading effect of images in the WeChat applet. When the page is scrolled until the image becomes visible, the image will load automatically. This can not only improve the loading speed of mini programs, but also save traffic and reduce server pressure, giving users a better experience.

Summary:

Lazy loading of images is one of the commonly used techniques in WeChat applet development. By listening to page scroll events and using the IntersectionObserver API, we can easily implement lazy loading of images. In actual development, lazy loading of images can be optimized and expanded according to specific needs, thereby further improving the performance and user experience of the mini program.

The above is the detailed content of Implement the lazy loading effect of images in WeChat mini programs. For more information, please follow other related articles on the PHP Chinese website!