# 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>
# 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.
← observe-dom pulldown →