Vue 2 image and video loader supporting lazy loading. Visual 2.x is a simplification of Version 1.x with a greater reliance on modern browser features (IntersectionObserver, object-fit, srcset, sizes, etc).
Examples at https://bkwld.github.io/vue-visual.
- Install the package:
npm install --save vue-visualor
yarn add vue-visual
- Register the component:
import Vue from 'vue' import Visual from 'vue-visual' Vue.component('visual', Visual) import 'vue-visual/index.css'
- These polyfills are recommended for older browsers:
See the Storybook.
A list of the component properties that may be set on the Visual component.
image (string): The URL of an image to load.
srcset (string): An
imgsrcset, used in addition to the
image. Both are recommended.
webp-srcset (string): A
srcsetthat will be added to a
sourceinside of a
pictureelement with a
video (string|array): A video that is loaded after the image is loaded if the device supports video. If a string, should be the URL to a source video. If an array, a list of video URLs that will be added as difference
width (number|string): This width will be applied to the asset element. If a number, it's assumed to be a px value.
height (number|string): See
max-width (number|string): This value will be applied to the asset element as the css
max-width. If a number, it's assumed to be a px value.
sizes (string): Specify the
aspect (number): Force the Visual to a specific aspect ratio. This works by making the asset
position:absoluteand then using an inner div with a
padding-topset to a percentage.
expand (boolean): Make the Visual fill it's container via CSS using absolute positioning.
object-fit (string)- Default
cover. Like the CSS property.
object-position (string)- Default
center center. Like the CSS property.
align (string)- Default
center middle.. Used in conjunction with slots to position the slot content. May be any combination of one horizontal (
right) and one vertical (
bottom) choice, space-delimited.
autoload (boolean)- Default:
true, assets are loaded immediately unless
lazyload (boolean)- Waits until the Visual enters the viewport to trigger loading. Overrides,
intersection-options (object)- IntersectionObserver options. Used with
placeholder-color- Sets a background color behind the assets. Most useful in conjunction with an
transition (string, boolean)- Default:
'vv-fade'. A Vue transition name that is applied when an asset is loaded. Set to an empty string to immediately render assets rather than waiting for loading.
autoplay (boolean)- If
true, begins playing immediately.
autopause (boolean)- If
true, begins playing when the Visual enters the viewport and stops when it leaves. Overrides
loop (boolean)- Sets
muted (boolean)- Sets
controls (boolean)- Sets
default: Markup is added after the assets and before the loader
<source>tags to the
<source>tags to the
load()- Manually initiate loading.
videoto restart playback from beginning.
loaded:image- Image asset has finished loading
loaded:video- Video asset has finished loading
loaded- All assets hvae loaded
- Boot up the Storybook with
yarn storybookand use that as your HMR friendly dev environment
npm version ...to build, tag, and update the poblished storybook
Changes from 1.x
- Dropped props:
- per-asset variants for
- Prop changes
- Not testing for video support on device
- Video playing state not stored in Vue state
- Image and video loaded simultenously, not in series
setDefaultsfor setting default options. See custom-defaults for an example of how to implement this functionality using a functional component.
migrate-1.x.coffee shows an example of a functional component that migrates the old API to the new API.