小程序 图片 loading 代码

小程序中加载图片时，可以使用loading效果提升用户体验。下面是一个示例代码：

1. 在wxml文件中添加一个loading的view：

<view class="loading">
  <image class="loading-img" src="/images/loading.gif"></image>
</view>

2. 在wxss文件中定义.loading和.loading-img的样式：

.loading {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-img {
  width: 100px;
  height: 100px;
}

3. 在js文件中控制loading的显示和隐藏：

Page({
  data: {
    showLoading: false
  },
  
  // 在需要加载图片的地方调用该方法
  loadImage: function() {
    this.setData({
      showLoading: true
    });

    wx.getImageInfo({
      src: '/images/demo.jpg',
      success: function(res) {
        console.log(res.width);
        console.log(res.height);
      },
      fail: function(res) {
        console.log('加载图片失败');
      },
      complete: function() {
        this.setData({
          showLoading: false
        });
      }.bind(this)
    });
  }
});

4. 在对应的wxml中绑定showLoading属性：

<view>
  <!-- 图片显示区域 -->
  <image class="image" src="/images/demo.jpg"></image>

  <!-- loading view -->
  <view wx:if="{{showLoading}}">
    <image class="loading-img" src="/images/loading.gif"></image>
  </view>
</view>

以上就是一个简单的小程序图片加载的loading效果代码。当调用`loadImage`方法加载图片时，loading view就会显示，加载完成后就会隐藏。这样用户在等待图片加载的过程中可以看到loading效果，提升了用户体验。