observe-image 2.1.0

Introduction

Turn on the detection of the loading of image elements in the wrapper child element. Regardless of whether the image is loaded successfully or not, BetterScroll's refresh method is automatically called to recalculate the scrollable width or height, which was supported in v2.1.0.

TIP

For scenes where CSS has been used to determine the width and height of the image, this plugin should not be used, because each call to refresh will affect performance. You only need it if the width or height of the image is uncertain.

Install

npm install @better-scroll/observe-image --save

// or

yarn add @better-scroll/observe-image

Usage

  import BScroll from '@better-scroll/core'
  import ObserveImage from '@better-scroll/observe-image'
  BScroll.use(ObserveImage)

  new BScroll('.bs-wrapper', {
    //...
    observeImage: true
  })

Demo

<template>
  <div class="observe-image-container">
    <div class="scroll-wrapper" ref="scroll">
      <div class="scroll-content">
        <img width="100%" v-for="(url, index) in images" :src="url" alt="" :key="index">
      </div>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import BScroll from '@better-scroll/core'
  import ObserveImage from '@better-scroll/observe-image'

  BScroll.use(ObserveImage)
  export default {
    data () {
      return {
        images: [
          'https://dpubstatic.udache.com/static/dpubimg/dEswI1MVy6/zoo.png',
          'https://dpubstatic.udache.com/static/dpubimg/BYb_wPak21/home.png',
          'https://dpubstatic.udache.com/static/dpubimg/B6q1pWB0sB/cabin.png',
          'https://dpubstatic.udache.com/static/dpubimg/76n1ilzf4R/stone.png'
        ]
      }
    },
    mounted() {
      this.init()
    },
    beforeDestroy() {
      this.bs.destroy()
    },
    methods: {
      init() {
        this.bs = new BScroll(this.$refs.scroll, {
          observeImage: true
        })
      }
    }
  }
</script>

<style lang="stylus" rel="stylesheet/stylus" scoped>

.observe-image-container
  text-align center
  .scroll-wrapper
    position relative
    width 300px
    height 300px
    margin 20px auto
    border 3px solid #42b983
    border-radius 5px
    overflow hidden
  .scroll-content
    font-size 0
</style>

observeImage Options

TIP

When observeImage is configured as true, the plugin uses the default plugin option.

const bs = new BScroll('.wrapper', {
  observeImage: true
})

// equals

const bs = new BScroll('.wrapper', {
  observeImage: {
    debounceTime: 100 // ms
  }
})

debounceTime

• Type: number

• Default: 100

  After detecting the success or failure of the image loading, the refresh method will be called after debounceTime milliseconds to recalculate the scrollable height or width. If multiple images load successfully or fail within debounceTime milliseconds, the refresh method will only be called once.

  TIP

  When debounceTime is 0, the refresh method will be called immediately instead of using setTimeout.