nuxt-lazyimage
This module offers you a <LazyImage>
Component which handles lazy loading for images.
⚠️ Please note that this module has an dependency to @bazzite/nuxtoptimizied-images
module.
Demo
Features
- Lazy Loading is enabled through popular lazysizes library.
- Since we're using nuxt-optimizied-images under the hood you will get optimizied images out of the box.
🎯 Install
yarn add nuxt-lazyimage @bazzite/nuxt-optimized-images# npm install nuxt-lazyimage nuxt-optimizied-images
As described in the nuxt-optimized-images
module documentation you need to install the appropiate loaders for your project.
yarn add -D responsive-loader imagemin-mozjpeg webp-loader lqip-loader# npm install --save-dev responsive-loader imagemin-mozjpeg webp-loader
Add modules to nuxt.config.js
modules: // Simple usage 'nuxt-lazyimage' '@bazzite/nuxt-optimized-images' // With options 'nuxt-lazyimage' /* module options */ '@bazzite/nuxt-optimized-images' /* module options */
📌 Configuration
lazyImage: defaultCss: true // should defaultCSS be included?
🚀 Usage
⚠️ Important The reason why you need to set the width and height manually is that I want to avoid fixed CSS heights or js width/height calculations. The way I do it is mainly via CSS aspect-ratios. You can see an implementation in the current [example] code (https://github.com/regenrek/nuxt-lazyimage-example) or you can dig older examples here on Codepen, Codesandbox and nuxt-lazysizes-aspect-ratio-blur.
Simple Usage
Simple Example with default path ~/assets/images/cat.jpg
Notice: Aspect-Ratio is a custom class which isn't included - read above
You can use some external image url too
Load an image through some path.
Be careful you need to use
require()
for this scenario nuxt.js#448, vuejs#202
Smooth Parallax Scrolling
If you like smooth scrolling for your images you can combine locomotive-scroll with nuxt-lazyimage
.
Simple smooth scroll
Add more scrolling speed (even negative)
You can also add some nice effect with inside scrolling
Viewport Transition Effects
Simple fade in effect for your image
Some more effects...
⚠️ Important Unfortunately transitions and smooth-scrolling are currently tightly coupled to locomotive-scroll viewport library which I personally prefer using atm. That means you definitly need a custom library that gives you an active class on the element if the image scrolls into the current viewport. Also the animations.css
file uses is-inview
class from locomotive.
To get it work with other viewport libraries you need to tweak some elements inside the Component. Or you just wrap the <LazyImage />
with some custom directive and code the animation right away. For example Akryum/vue-observer-visibility works very well.
I think this needs some refactoring to be able to set your active
classes yourself - feel free to adapt.
Use lqip with blur-up technique
Example with lqip-loader
You need to install
lqip-loader
first!
Some more examples
Choose between object-fit: cover and contain.
It uses
lazysizes/plugins/object-fit/ls.object-fit
behind the scene
<!-- default -->
API Reference
Props
Name | Description | Type | Required | Default |
---|---|---|---|---|
dataSrc | The image URL you want to show | 'cat.jpg' |
true |
- |
objectFit | Specify how the image/video will fit the container | 'cover' / 'contain' |
false |
'cover' |
smoothScrollType | Enable animation wrapper. Works currently only with locomotive library | 'none' / 'outside' / 'inside' |
false |
'none' |
effect | Define the animation effect you want to use | 'a-reveal' / 'a-fadein' / 'custom' |
false |
'' |
scrollSpeed | Everything > 0 gets an smooth parallax scroll. Works only with locomotive library! | String |
false |
'0' |
ignoreImgBasePath | The default path is ~/assets/images. | Boolean |
false |
false |
useSrcSet | If you disable this prop you will get a simple tag | Boolean |
false |
true |
useLqip | Use LQIP/blurry image placeholder/Blur up image technique. Needs lqip-loader | Boolean |
false |
false |
Slots
Name | Description | Default Slot Content |
---|---|---|
default | - | - |
Roadmap
- Add more flexibility for different viewport libraries
- Add possibility to use more custom attributes (like scroll-orientation)
Development
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
Issues
- Currently there is no SSR Support !
License
Copyright (c) Kevin Regenrek hello@regenrek.at