【经验分享】解决Better-Scroll因为图片没有下载完导致

本文解决问题

解决Better-Scroll因为图片没有下载完导致的滚动条高度不够，无法浏览全部内容的问题。

虽然知识点很简单，但是网上的代码偏少，无法做到拿来就用，故而写此文，希望遇到此类问题的朋友有所帮助。

本文适合以下读者

1. 使用Vue进行前端开发；
2. 使用Better-Scroll组件，并且已经熟知基本开发原则；

解决思路

问题核心

图片的异步加载，且速度慢，导致页面高度没有及时更新；

解决思路

利用<img>标签的complete属性，当img全部加载完毕，更新Better-Scroll；

分为两步：

1. 一般情况，会用到动态图片的地方，主要是在正文的内容，需要设置一个ref，然后程序获得ref中所有的图片属性。使用getElementsByTagName
2. 写一个interval循环，判断图片是否全部加载完毕；

代码

1. 设定ref
   因为我的代码中正文是在Detail组件内的，所以我用了两个ref，具体为：
   Product.vue（主页面）

<!-- 产品详情 -->
<Detail ref="Detail" :goods="goods"></Detail>

Detail.vue（组件）

<div ref="detailWrapper">
  <div class="content_wrapper" v-html="goods.content"></div>
</div>

2. 关键的interval循环

updateScrollImage() {
      //解决better-scroll因为图片没有下载完导致的滚动条高度不够，无法浏览全部内容的问题。
      //原因是better-scroll初始化是在dom加载后执行，此时图片没有下载完成，导致滚动条高度计算不准确。
      //利用图片的complete属性进行判断，当所有图片下载完成后再对scroll重新计算。
      let imgs = this.$refs.Detail.$refs.detailWrapper.getElementsByTagName("img");
      if (imgs) {
        let that = this;
        let timer = setInterval(() => {
          let all1 = false;
          //console.log(imgs);
          for (let n1 = 0; n1 < imgs.length; n1++) {
            console.log(imgs[n1].complete);
            if (imgs[n1].complete) {
              all1 = true;
              continue;
            } else {
              all1 = false;
              break;
            }
          }
          //console.log(all1);
          if (all1) {
            that.scroll.refresh();
            clearInterval(timer);
          }
        }, 100);
      }
    },

3. updateScrollImage调用在远程数据赋值之后

this.$axios(`/api/goods/getGoods/${this.goodsId}`).then(res => {
          // 略
         this.initScroll();
         this.updateScrollImage();
 });

4. 其他initScroll代码

initScroll() {
      this.$nextTick(() => {
        if (!this.scroll) {
          this.scroll = new BScroll(this.$refs.productWrapper, {
            click: true, // 配置允许点击事件
            scrollY: true // 开启纵向滚动
          });

          this.scroll.on("scrollEnd", this.onScroll);
        } else {
          this.scroll.refresh(); // 重新计算 better-scroll，当 DOM 结构发生变化的时确保滚动效果正常
        }
      });
    },

完毕，请大家根据情况使用。谢谢。