正文

小程序中判断JS加载图片是否成功的方法

/0 浏览量
0423

在微信小程序中，图片加载是页面渲染的一部分，而确保图片成功加载是保证用户体验的关键。以下是一些常用的方法来判断小程序中JavaScript加载图片是否成功：

1. 使用图片标签的onerror事件

在wxml文件中，你可以直接给<image>标签添加onerror事件处理器。当图片加载失败时，onerror事件会被触发，你可以在这里进行相应的错误处理。

<image src="image-url" onerror="imageErrorHandler" />

function imageErrorHandler(event) {
  console.error('图片加载失败:', event);
  // 这里可以添加你的错误处理逻辑，例如：
  event.target.dataset.error = 'true'; // 将错误信息赋值给image标签的dataset属性
}

2. 使用wx.getImageInfo方法

微信小程序提供了一个wx.getImageInfo API，它可以获取图片信息。通过这个API，你可以检查图片是否成功加载。

wx.getImageInfo({
  src: 'image-url',
  success: function (res) {
    console.log('图片信息:', res);
    if (res.errMsg === 'getImageInfo:ok') {
      // 图片加载成功
    }
  },
  fail: function (err) {
    console.error('图片加载失败:', err);
  }
});

3. 利用<image>标签的data-src属性

你可以在<image>标签中不直接写src属性，而是用data-src属性来存储图片的URL。然后在图片加载成功后再将其赋值给src属性。

<image data-src="image-url" bindload="onImageLoad" />

function onImageLoad(event) {
  event.currentTarget.src = event.currentTarget.dataset.src;
}

4. 监听页面的onPullDownRefresh事件

如果你的图片加载依赖于页面刷新（例如，下拉刷新），可以在页面的onPullDownRefresh事件中处理图片加载逻辑，并检查图片是否成功加载。

Page({
  onPullDownRefresh: function () {
    // 刷新页面时重新加载图片
    this.loadImages();
  },
  loadImages: function () {
    // 图片加载逻辑
    // ...
    // 加载成功后
    wx.stopPullDownRefresh();
  }
});

总结

在微信小程序中，判断图片是否成功加载有多种方法，你可以根据具体的使用场景和需求选择最适合的方法。记得在使用过程中，注意资源的优化和错误处理，以提高应用的稳定性和用户体验。

-- 展开阅读全文 --