nuxt-lazyimage

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![License][license-src]][license-href]

This module offers you a Component which handles lazy loading for images.

⚠️ Please note that this module has an dependency to @bazzite/nuxtoptimizied-images module.

Demo

!nuxt-lazyimage

* CodeSandbox Example
* Example Code

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

``bash
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.

`bash
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

`js
{
modules: [
// Simple usage
'nuxt-lazyimage',
'@bazzite/nuxt-optimized-images',

// With options
['nuxt-lazyimage', { / module options / }],
['@bazzite/nuxt-optimized-images', { / module options / }],
]
}
`

📌 Configuration

`js
{
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.

$3


Simple Example with __default path__ ~/assets/images/cat.jpg
> Notice: Aspect-Ratio is a custom class which isn't included - read above
`html

`

You can use some __external__ image url too
`html

`

Load an image through some __path__.
> Be careful you need to use require() for this scenario nuxt.js#448, vuejs#202
`html
)" class="aspect-ratio-16/9" :ignore-img-base-path="true" />
`

$3

If you like smooth scrolling for your images you can combine locomotive-scroll with nuxt-lazyimage.

Simple smooth scroll
`html
data-src="cat.jpg"
class="aspect-ratio-16/9"
smooth-scroll-type="outside"
/>
`

Add more scrolling speed (even negative)
`html
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
`html
data-src="cat.jpg"
class="aspect-ratio-16/9"
smooth-scroll-type="inside"
scroll-speed="1"
/>
`

$3

Simple fade in effect for your image
`html
data-src="cat.jpg"
class="aspect-ratio-16/9 a-fadein"
effect="a-fadein"
/>
`

Some more effects...
`html
data-src="cat.jpg"
class="aspect-ratio-16/9"
effect="a-reveal a-reveal-left-to-right"
/>
data-src="cat.jpg"
class="aspect-ratio-16/9"
effect="a-reveal a-reveal-top-to-bot"
/>
`

⚠️ 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 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.

$3

Example with lqip-loader
> You need to install lqip-loader first!
`html

`

$3

Choose between object-fit: cover and contain.
> It uses lazysizes/plugins/object-fit/ls.object-fit behind the scene
`html


`

API Reference

$3

|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|







$3


|Name|Description|Default Slot Content|
|---|---|---|
|default|-|-|

Roadmap

1. Add more flexibility for different viewport libraries
2. Add possibility to use more custom attributes (like scroll-orientation)

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev`

Issues

* Currently there is no SSR Support !

License

MIT License

Copyright (c) Kevin Regenrek

[npm-version-src]: https://img.shields.io/npm/v/nuxt-lazyimage/latest.svg?style=flat-square
[npm-version-href]: https://npmjs.com/package/nuxt-lazyimage

[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-lazyimage.svg?style=flat-square
[npm-downloads-href]: https://npmjs.com/package/nuxt-lazyimage

[circle-ci-src]: https://img.shields.io/circleci/project/github/regenrek/nuxt-lazyimage.svg?style=flat-square
[circle-ci-href]: https://circleci.com/gh/regenrek/nuxt-lazyimage

[codecov-src]: https://img.shields.io/codecov/c/github/regenrek/nuxt-lazyimage.svg?style=flat-square
[codecov-href]: https://codecov.io/gh/regenrek/nuxt-lazyimage

[license-src]: https://img.shields.io/npm/l/nuxt-lazyimage.svg?style=flat-square
[license-href]: https://npmjs.com/package/nuxt-lazyimage