微信小程序开发中的网络图片加载和优化处理

大黄鸭duck.

于 2024-06-13 10:24:01 发布

阅读量536

点赞数 4

文章标签：微信小程序 notepad++ 小程序

本文链接：https://blog.csdn.net/qq_67153941/article/details/139647229

版权

微信小程序中的网络图片加载是非常常见的功能，本文将详细介绍如何进行网络图片加载和优化处理。

图片加载基本原理在小程序中加载网络图片是通过wx.request()函数发起一个网络请求，然后通过wx.getImageInfo()函数获取图片信息，最后通过wx.createImage()函数创建一个图片对象并将其渲染到页面上。
图片加载示例代码下面是一个简单的图片加载示例代码，演示了如何加载一张网络图片。

先在wxml文件中添加一个image标签：

<image src="{{imageUrl}}"></image>

然后在js文件中定义一个数据项imageUrl，用于存储图片的URL：

Page({
  data: {
    imageUrl: ''
  },

  onLoad: function() {
    var that = this;
    wx.request({
      url: 'http://example.com/image.jpg',
      success: function(res) {
        that.setData({
          imageUrl: res.data.url
        });
      }
    })
  }
})

这段代码中，通过wx.request()函数发起了一个GET请求，请求的URL是http://example.com/image.jpg。请求成功后，将返回的图片URL存储到数据项imageUrl中，然后页面上的image标签就会根据这个URL加载对应的图片。

图片加载过程中的优化为了提升页面加载速度和用户体验，可以对图片加载过程进行一些优化处理。下面介绍几种常用的优化方法。

3.1 图片懒加载图片懒加载是指只加载当前可见区域的图片，而不加载其他不可见区域的图片。这样可以减少页面的请求次数，提升页面加载速度。在小程序中，可以通过监听页面的滚动事件来判断图片是否进入了可见区域。

示例代码如下，在js文件中定义一个数据项lazyLoadImages，用于存储需要懒加载的图片URL：

Page({
  data: {
    lazyLoadImages: [],
    windowHeight: 0
  },

  onLoad: function() {
    var that = this;
    wx.getSystemInfo({
      success: function(res) {
        that.setData({
          windowHeight: res.windowHeight
        });
      }
    });
    // 请求图片URL列表
    wx.request({
      url: 'http://example.com/image_list.json',
      success: function(res) {
        that.setData({
          lazyLoadImages: res.data
        });
      }
    });
  },

  onReady: function() {
    var that = this;
    wx.createSelectorQuery().selectAll('.lazy-load-image').boundingClientRect(function(rects) {
      rects.forEach(function(rect) {
        if(rect.top <= that.data.windowHeight && rect.bottom >= 0) {
          var lazyLoadImages = that.data.lazyLoadImages;
          lazyLoadImages.push(rect.dataset.src);
          that.setData({
            lazyLoadImages: lazyLoadImages
          });
        }
      });
    }).exec();
  },

  onPageScroll: function() {
    var that = this;
    wx.createSelectorQuery().selectAll('.lazy-load-image').boundingClientRect(function(rects) {
      rects.forEach(function(rect) {
        if(rect.top <= that.data.windowHeight && rect.bottom >= 0) {
          var lazyLoadImages = that.data.lazyLoadImages;
          if(lazyLoadImages.indexOf(rect.dataset.src) === -1) {
            lazyLoadImages.push(rect.dataset.src);
            that.setData({
              lazyLoadImages: lazyLoadImages
            });
          }
        }
      });
    }).exec();
  }
})

在wxml文件中，给需要懒加载的image标签添加一个类名lazy-load-image，并设置data-src属性为图片URL：

<image class="lazy-load-image" data-src="{{item}}" src=""></image>

这段代码中，通过监听页面的滚动事件和获取元素的位置信息，判断图片是否进入了可见区域，如果是则将其URL添加到lazyLoadImages数据项中，并更新页面上相应的image标签的src属性，从而实现图片的懒加载。

3.2 图片预加载图片预加载是指提前加载页面中可能需要用到的图片，使其缓存在本地，当需要显示时可以直接从缓存中读取，而不需要再次发起网络请求。在小程序中，可以通过wx.downloadFile()函数下载图片，然后通过wx.saveFile()函数将图片保存到本地。

示例代码如下，在js文件中定义一个数据项preLoadImages，用于存储需要预加载的图片URL：

Page({
  data: {
    preLoadImages: []
  },

  onLoad: function() {
    var that = this;
    // 请求图片URL列表
    wx.request({
      url: 'http://example.com/image_list.json',
      success: function(res) {
        that.setData({
          preLoadImages: res.data
        });
        // 预加载图片
        that.preLoadImages();
      }
    });
  },

  preLoadImages: function() {
    var that = this;
    var preLoadImages = that.data.preLoadImages;
    var preLoadTasks = [];
    preLoadImages.forEach(function(imageUrl) {
      preLoadTasks.push(new Promise(function(resolve, reject) {
        wx.downloadFile({
          url: imageUrl,
          success: function(res) {
            wx.saveFile({
              tempFilePath: res.tempFilePath,
              success: function(res) {
                resolve(res.savedFilePath);
              },
              fail: function() {
                reject();
              }
            });
          },
          fail: function() {
            reject();
          }
        });
      }));
    });
    Promise.all(preLoadTasks).then(function(savedFilePaths) {
      // 预加载完成后，将图片的本地路径存储到数据项preLoadImages中
      that.setData({
        preLoadImages: savedFilePaths
      });
    }).catch(function() {
      // 预加载失败
    });
  }
})

在wxml文件中，给需要预加载的image标签添加一个类名pre-load-image，并设置data-src属性为图片URL：

<image class="pre-load-image" data-src="{{item}}" src=""></image>

这段代码中，通过wx.downloadFile()函数下载图片，并通过wx.saveFile()函数将图片保存到本地。下载和保存都是异步操作，所以使用了Promise对象来处理异步任务。当所有图片都下载并保存完成后，将图片的本地路径存储到preLoadImages数据项中，并更新页面上相应的image标签的src属性，从而实现图片的预加载。

3.3 图片压缩网络图片加载时，为了减小带宽消耗和提升加载速度，通常需要对图片进行压缩处理。在小程序中，可以通过调整图片的quality和size参数来实现图片的压缩。

示例代码如下，在js文件中定义一个数据项compressImage，用于存储需要压缩的图片URL：

Page({
  data: {
    compressImage: ''
  },

  onLoad: function() {
    var that = this;
    // 请求需要压缩的图片URL
    wx.request({
      url: 'http://example.com/image.jpg',
      success: function(res) {
        that.setData({
          compressImage: res.data.url
        });
        // 压缩图片
        that.compressImage();
      }
    });
  },

  compressImage: function() {
    var that = this;
    var compressImage = that.data.compressImage;
    wx.getImageInfo({
      src: compressImage,
      success: function(res) {
        var imageSize = res.width * res.height;
        var quality = 80; // 图片压缩质量，范围为0-100
        var maxSize = 248832; // 图片尺寸阈值，单位为像素
        if(imageSize > maxSize) {
          quality = quality * (maxSize / imageSize);
        }
        wx.getImageInfo({
          src: compressImage + '?imageMogr2/quality/' + quality,
          success: function(res) {
            that.setData({
              compressImage: res.path
            });
          }
        });
      }
    });
  }
})

在wxml文件中，使用image标签显示压缩后的图片：