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-visualoryarn 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): Animgsrcset, used in addition to theimage. Both are recommended. -
webp-srcset (string): Asrcsetthat will be added to asourceinside of apictureelement with atypeofimage/webp. -
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<source>s.
-
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): Seewidth -
max-width (number|string): This value will be applied to the asset element as the cssmax-width. If a number, it's assumed to be a px value. -
sizes (string): Specify theimgsizesattribute. -
aspect (number): Force the Visual to a specific aspect ratio. This works by making the assetposition:absoluteand then using an inner div with apadding-topset to a percentage. -
expand (boolean): Make the Visual fill it's container via CSS using absolute positioning.
-
object-fit (string)- Defaultcover. Like the CSS property. -
object-position (string)- Defaultcenter center. Like the CSS property. -
align (string)- Defaultcenter middle.. Used in conjunction with slots to position the slot content. May be any combination of one horizontal (left,center,right) and one vertical (top,middle,bottom) choice, space-delimited.
-
preload (boolean)- Requires Nuxt framework. Iftruewill add<link rel="preload"/>tags to the<head>for the image assets. -
autoload (boolean)- Default:true. Iftrue, assets are loaded immediately unlesslazyload. -
lazyload (boolean)- Waits until the Visual enters the viewport to trigger loading. Overridesautoload. -
intersection-options (object)- IntersectionObserver options. Used withlazyloadandautopause. -
placeholder-color- Sets a background color behind the assets. Most useful in conjunction with anaspectvalue. -
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)- Iftrue, begins playing immediately. -
autopause (boolean)- Iftrue, begins playing when the Visual enters the viewport and stops when it leaves. Overridesautoplay. -
loop (boolean)- Sets<video>loop -
muted (boolean)- Sets<video>muted -
controls (boolean)- Sets<video>controls
alt (string)- Sets thealtattribute oraria-labelvalue, depending on context.
default: Markup is added after the assets and before the loaderimage-source: Adds<source>tags to the<picture>element.video-source: Adds<source>tags to the<video>element.
load()- Manually initiate loading.play()- Tellvideoto play.pause()- Tellvideoto pause.restart()- Tellvideoto restart playback from beginning.
loaded:image- Image asset has finished loadingloaded:video- Video asset has finished loadingloaded- All assets hvae loaded
- Boot up the Storybook with
yarn storybookand use that as your HMR friendly dev environment - Use
npm version ...to build, tag, and update the poblished storybook
- Dropped props:
posterfallback- per-asset variants for
load, etc
- Prop changes
background➡object-fitbackground-position➡object-positionfill➡expand
- Not testing for video support on device
- Video playing state not stored in Vue state
- Image and video loaded simultenously, not in series
- Removed
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.