This module offers you a <LazyImage>
Component which handles lazy loading for images.
@bazzite/nuxtoptimizied-images
module.
- 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.
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 */ }],
]
}
{
lazyImage: {
defaultCss: true // should defaultCSS be included?
}
},
Simple Example with default path ~/assets/images/cat.jpg
Notice: Aspect-Ratio is a custom class which isn't included - read above
<LazyImage data-src="cat.jpg" class="aspect-ratio-16/9" />
You can use some external image url too
<LazyImage data-src="https://placekitten.com/1200/800" class="aspect-ratio-16/9" />
Load an image through some path.
Be careful you need to use
require()
for this scenario nuxt.js#448, vuejs#202
<LazyImage data-src="require(`~/assets/media-folder/dog.jpg`)" class="aspect-ratio-16/9" :ignore-img-base-path="true" />
If you like smooth scrolling for your images you can combine locomotive-scroll with nuxt-lazyimage
.
Simple smooth scroll
<LazyImage
data-src="cat.jpg"
class="aspect-ratio-16/9"
smooth-scroll-type="outside"
/>
Add more scrolling speed (even negative)
<LazyImage
data-src="cat.jpg"
class="aspect-ratio-16/9"
smooth-scroll-type="outside"
scroll-speed="-3"
/>
You can also add some nice effect with inside scrolling
<LazyImage
data-src="cat.jpg"
class="aspect-ratio-16/9"
smooth-scroll-type="inside"
scroll-speed="1"
/>
Simple fade in effect for your image
<LazyImage
data-src="cat.jpg"
class="aspect-ratio-16/9 a-fadein"
effect="a-fadein"
/>
Some more effects...
<LazyImage
data-src="cat.jpg"
class="aspect-ratio-16/9"
effect="a-reveal a-reveal-left-to-right"
/>
<LazyImage
data-src="cat.jpg"
class="aspect-ratio-16/9"
effect="a-reveal a-reveal-top-to-bot"
/>
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.
Example with lqip-loader
You need to install
lqip-loader
first!
<LazyImage data-src="cat.jpg" :use-lqip="true" />
Choose between object-fit: cover and contain.
It uses
lazysizes/plugins/object-fit/ls.object-fit
behind the scene
<LazyImage data-src="cat.jpg" objectFit="contain" />
<LazyImage data-src="cat.jpg" objectFit="cover" /> <!-- default -->
Name | Description | Default Slot Content |
---|---|---|
default | - | - |
- Add more flexibility for different viewport libraries
- Add possibility to use more custom attributes (like scroll-orientation)
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
- Currently there is no SSR Support !
Copyright (c) Kevin Regenrek hello@regenrek.at