阅读 363

小程序swiper图片“懒加载”

最近在做一个点读的小程序,其中有个点读功能,加载书本图片,点击图片指定区域播放音频,左右滑动翻页,翻页就用到了小程序的swiper组件了,因为一本书的图片比较多,大概80页左右

  1. 一开始是遍历出所有图片,但是第一次因为要加载的图片太多了,渲染有点慢,感觉整个小程序卡住了

  2. 换个方法,swiper只显示5swiper-item,根据翻页方向来动态调整swiper-item的内容和swipercurrent,太久了,忘记是怎么不行了

  3. 继续看文档,看到image有个lazy-load属性,说是懒加载的,我居然信了,结果还是一进小程序,就一直发网络请求加载图片,这个lazy-load属性只对scroll-view有效

  4. 最后没办法了,还是渲染全部swiper-item,监听swiperchange事件,所有图片默认url为空,记住当前的index,动态赋值图片的 url,预加载前后两张的图片,其它图片看以前是否加载过,加载过的赋值url,没加载过的为空,貌似是解决图片加载问题

下面是用的wepy写的部分小程序代码

<swiper :current="current" @change="changePage"  >
    <swiper-item  v-for="item in swiperImages" :key="item" :item-id="item.Id">
      <view class="swiper-item">
        <img v-if="item.Cover" :src="item.Cover" @tap="clickBook" />
      </view>
    </swiper-item>
</swiper>
复制代码

wepy.page({
  data: {
    current: 0
    images: [],
  },
computed: {
    swiperImages() {
      let copyImage = JSON.parse(JSON.stringify(this.images));
      if (copyImage.length === 0) {
        return [];
      }
      let start = this.current - 1,
        end = this.current + 1;
      return copyImage.map((v, index) => {
        if ( index < start || index > end) {
          v.Cover = '';
        }
        return v;
      });
    }
},
methods:{
    changePage(e) {
      let itemId = parseInt(e.$wx.detail.currentItemId);
      let currentPage = null;
      this.images.forEach(v => {
        if (v.Id === itemId) {
          currentPage = v;
        }
      });
      if (currentPage) {
        this.loadData(currentPage);
        this.current = currentPage
      }
    }
}
})
复制代码

全文完