# 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.


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'

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

# Demo

  <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">

# observeImage Options


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.


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