Lazy load background images for Vue 2

Overview

Lazy Background Images for Vue

npm version

vue-lazy-background-images

A simple Vue component for lazy loading background components.

This component is only for background images and does not support anything other than that.

Installation

npm install --save-dev vue-lazy-background-images

Usage

Import the component

import VueLazyBackgroundImage from 'vue-lazy-background-images'

Register the component

Vue.component('lazy-background', VueLazyBackgroundImage)

And put into your DOM

<lazy-background
  :image-source="backgroundImage"
  loading-image="/img/loading.svg"
  error-image="/img/error.png"
  image-class="cam-viewport"
  background-size="cover"
  :image-success-callback="successCallback"
  :image-error-callback="errorCallback">
</lazy-background>

And get this out

<div data-width="640" data-height="360" data-state="loaded" class="cam-viewport loaded" style="background-image: url(http://my-site.com/test-image.png); background-size: cover"></div>

You can see the image-source in the above example is a computed property, although it doesn't have to be.

The callbacks in the above example are bound to data()

Width and height are for the image not the containing div.

Values

  • image-source - The source of the desired image (required)
  • loading-image - Path to the loader image (png, svg etc) (required)
  • error-image - Path to the error image (required)
  • image-class - Any classes you wish to include on the image (optional)
  • background-size - CSS background-size value (optional, default is cover)
  • image-success-callback - Function on success (optional)
  • image-error-callback - Function on error (optional)

Details

Knowing state

The component attaches its state as a class, as well as a data- attribute called state

There are 3 states, loading, loaded, and error

There are no events that get emitted, you can access either the classlist or the dataset to see what state your image is in.

Image size

There will be 2x data- attributes on your rendered - width and height which is the dimensions of the actual image (not the rendered div)

Background size

This is cover by default although it can be overridden.

Callbacks

You can pass in events to trigger on success and failure. These are completely optional and are not required for this to work.

Notes

Contributions welcome, as long as they are related to background images. Enjoy the component

You might also like...
simplistic vue.js directive for image lazy loading

Vue Progressive Image Lazy load images while showing a preview. Super tiny, less than half a kilobyte minified and gzipped. usage v-lazy-img adds the

:camera: Mini Image Lazy Loader for P(R)eact and Vue
:camera: Mini Image Lazy Loader for P(R)eact and Vue

Pimg is a Progessive Image Component For React, Preact and Vue.js. It helps in lazy loading of images in a nice and cool way. It's 2KB (gzipped). It h

A small lazy image loader for Vue

lazy-vue lazy-vue is the easiest way to get a lazy image loader working within your vue projects. It is meant to be as simplest as possible, so you do

Flexible modal component for Vue with ability of asynchronous lazy loading

vue-async-modal Flexible modal component for Vue with ability of asynchronous lazy loading Usage Firstly, you should add Modal component in your templ

A super simple image lazy loader for Vue.

cube-vue-image-lazy A super simple image lazy loader for Vue. Install yarn add cube-vue-image-lazy Warning: You'll need to install the w3c Intersectio

A Vue lazy loading directive.

A Vue lazy loading directive.

A vue component for sleek and optimal lazy loading

sloth-loader 🦥 Image Lazy loader Vue Component with intersection observer Example here Installation yarn add sloth-loader npm i sloth-loader import c

simple calculation lib with lazy feature 🎲➕➖➗✖️
simple calculation lib with lazy feature 🎲➕➖➗✖️

vue-lazy-calc this is a simple calculation plugin in lazy way. (inspired by lodash) features vue friendly strong typed lazy evaluation chaining method

A lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists
A lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists

Lazy Load List Lazy Load List is a lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists. Rend

Comments
  • DepShield encountered errors while building your project

    DepShield encountered errors while building your project

    The project could not be analyzed because of maven build errors. Please review the error messages here. Another build will be scheduled within 24 hours. If the build is successful this issue will be closed, otherwise the error message will be updated.

    This is an automated GitHub Issue created by Sonatype DepShield. GitHub Apps, including DepShield, can be managed from the Developer settings of the repository administrators.

    opened by sonatype-depshield[bot] 0
  • Adding in position-x and position-y props

    Adding in position-x and position-y props

    Hey there,

    I know this plugin hasn't been touched in a while, but I plan on using this for an upcoming project. We have an article list that displays featured images at varying dimensions and aspect ratios, which means that sometimes odd crops come up and people's faces get cut off, creating a less than desirable design.

    To fix this we are leveraging the focal point plugin from our CMS contentful, which allows you to select a point on the image, and it saves an X and Y value along with the image.

    I've added in two new props to allow users to add in an inline background-position css style, on top of the background-size prop that is already there.

    opened by RobErskine 0
  • How to use it with Nuxt?

    How to use it with Nuxt?

    First off, thanks for the great plugin! I'm trying to use this plugin along with Nuxt.js

    My code looks like this - <lazy-background :image-source="featured_article.coverImg" image-class="cam-viewport" background-size="cover" :image-success-callback="onLoaded"> </lazy-background>

    import VueLazyBackgroundImage from 'vue-lazy-background-images' export default { components:{ VueLazyBackgroundImage }

    However, I get the error "Unexpected identifier"

    Later, I saw this issue and changed the import statement accordingly to get a

    "Cannot find module 'vue-lazy-background-images/VueLazyBackgroundImage' from <project directory>"

    I've even tried registering the component as a global module on nuxt.config.js with ssr:false , but to no avail. It's my 16th hour of continuous coding here and I might have overlooked something really silly. Any help here would be extremely appreciated!

    opened by adarshsosale 2
  • Error on npm run dev

    Error on npm run dev

    After installing and importing :

    import Vue from 'vue' import App from './App' import VueLazyBackgroundImages from 'vue-lazy-background-images'

    Vue.component('lazy-background', VueLazyBackgroundImages)

    I get the following error

    I managed to fix this by changing "main": "main.js" to "main": "VueLazyBackgroundImage.vue" in package.json.

    opened by pongoman 9
Owner
Darryn Ten
I write code and stuff @darrynten
Darryn Ten
A simple lazy-load list component based Vue 2.x: https://dwqs.github.io/v2-lazy-list/

v2-lazy-list A simple lazy-load list component based Vue 2.x, which will be on-demand rendering the list based container element's viewport. v1.x is n

Pomy 31 Nov 18, 2020
Component-based lazy (CLazy) load images in Vue.js 2

Vue Clazy Load Claziest lazy loader out there! Component-based image lazy loader for Vue.js 2 Swaps between your image and another component when load

Matheus Grieger 108 Jun 14, 2022
Vue.js Image Kit Component with Lazy Load built in and Responsive Images

Vue Image Kit Vue.js Image Kit Component with Lazy Load built in and Responsive Images The inspiration comes from this and a talk from @derevandal in

Igor Guastalla 9 Mar 31, 2022
A Vue.js component to lazy load images using the Intersection Observer.

vue-li-image A Vue.js component to lazy load an image automatically when it enters the viewport using the Intersection Observer API.

null 0 Mar 19, 2021
A plugin of lazy-load images for Vue2.x

vue-lazyload-images A plugin of lazy-load images for Vue2.x Support images lazyload in window or build-in element. Demo Installation npm $ npm install

LowesYang 60 Mar 28, 2022
A Lazy load plugin for Vue 3.x

vue3-lazy Status: Alpha. Lazy load plugin for Vue 3.x inspired by vue-lazyload. This plugin support very simple options, and easy to use. Install $ np

null 2 Feb 8, 2022
Vue.js lazy load image directive with akamai image converter

vue-lazyload-akamai Vue.js lazy load image directive with akamai image converter ??

Blibli.com 2 Aug 13, 2018
vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

vue lazy container,By detect the visibility of elements in the page, decide whether to load resources and render.

null 5 Sep 25, 2022
The easiest way to lazy load your content

VueLazily The easiest way to lazy load your content. Inspired by vue-promised, recommend to look at it if you need loading/errors handling without laz

Enkot 6 Aug 31, 2022
🐌 A small size Vue.js directive for lazy loading images using IntersectionObserver API

?? vue-tiny-lazyload-img A small size Vue.js directive for lazy loading images using IntersectionObserver API Demo Page https://mazipan.github.io/vue-

Irfan Maulana 91 Nov 18, 2021