Component-based lazy (CLazy) load images in Vue.js 2

Overview

Vue Clazy Load

Claziest lazy loader out there!

Component-based image lazy loader for Vue.js 2

npm npm npm GitHub pull requests GitHub stars

Swaps between your image and another component when loading images, allowing you to use loaders from component frameworks such as spinners and progress bars. This method also allows transitioning between the two components.

Demo

Check out the example page.

Installation

Install with npm or yarn:

npm install vue-clazy-load
yarn add vue-clazy-load

Then simply import it to your project through the method that suits you best

  • ES6+

    import VueClazyLoad from 'vue-clazy-load'
  • Common/Require

    var VueClazyLoad = require('vue-clazy-load')

And install into your Vue instance

Vue.use(VueClazyLoad)

You can import it into specific components if you don't want to register Clazy Load globally

import { VueClazyLoad } from 'vue-clazy-load'

export default {
  components: {
    VueClazyLoad
  }
}

Also available through Unpkg CDN

<script src="https://unpkg.com/vue-clazy-load/dist/vue-clazy-load.min.js"></script>

Documentation

Clazy Load works without any JS configuration as is, all you need is the basic HTML markup:

<clazy-load src="https://unsplash.it/500">
  <img src="https://unsplash.it/500">
  <div class="preloader" slot="placeholder">
    Loading message
  </div>
</clazy-load>

The only required prop you must set is src that must correspond to your image's.

Props

All props supported by Clazy Load are listed below with their types and explanation.

src

  • Type: string
  • Default: none
  • Required

Source of the image to be loaded. Must match your <img> tag src.

tag

  • Type: string
  • Default: "div"

What tag the component should render to.

element

  • Type: string
  • Default: null

Selector for Intersecion Observer's root element. Leave blank/null to use viewport.

threshold

  • Type: Array | number
  • Default: [0, 0.5, 1]

Values for Intersection Observer's threshold option.

ratio

  • Type: number
  • Default: 0.4

Percent of the element that needs to be visible to trigger loading. Must be > 0 and <= 1.

margin

  • Type: string
  • Default: "0px"

Intersection Observer's margin option.

You can read more on MDN about every Intersection Observer-specific prop and what they do.

crossorigin

  • Type: string
  • Default: null
  • Valid options: "anonymous" | "use-credentials"

Sets image's crossOrigin option and allows loading external images. Useful for Service Workers and caching.

loadedClass

  • Type: string
  • Default: "loaded"

loadingClass

  • Type: string
  • Default: "loading"

errorClass

  • Type: string
  • Default: null

All classes are added to the root element, not the image itself.

Events

loading

Image started loading and placeholder is visible.

load

  • Param: native load event

Image finished loading and is now visible.

error

  • Param: native error event

Could not load image. Image is not shown, placeholder still visible.

Compatibility

Vue Clazy Load uses the Intersection Observer API to watch for the element visibility on screen. The advantages are native optimization from each browser and no need to implement a custom solution that may be buggy and increase file size. The only caveat to this approach is that this API is quite new, so older browsers do not support it.

If your application needs to be backwards compatible with IE and others, there are polyfills available. I personally recommend Polyfill.io. You can check their documentation on how to add it to your website, or simply include the following tag if you're not using any other polyfills:

<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=IntersectionObserver"></script>

Changelog

Check out changelog file.

Roadmap

Check roadmap file.

Contributing

Issues, questions and feature requests are welcome. If you can cover some problem, pull requests are also very welcome!

License

MIT

Copyright (c) 2017-2018, Matheus Grieger

Comments
  • slot=

    slot="image"

    Hi, example not working unless defining the image slot. i use: "vue": "^2.5.7", "vue-material": "beta",

    So adding the image slot to the first transition it works well.

    bug 
    opened by koslo 4
  • Can't find variable: IntersectionObserver - Safari

    Can't find variable: IntersectionObserver - Safari

    So I really love the vue clazy load, but I just tried it on Safari and got an error on your website:

    https://matheusgrieger.github.io/vue-clazy-load/example/index.html

    [Vue warn]: Error in nextTick: "ReferenceError: Can't find variable: IntersectionObserver"

    found in

    ---> ClazyLoad

    opened by pmochine 2
  • Error when build with webpack/UglifyJs

    Error when build with webpack/UglifyJs

    Hi. Thanks for great module!

    I am running npm run build with vue-cli webpack template and got an error

    ERROR in static/js/vendor.636071240149cb133e9f.js from UglifyJs
    Unexpected token: punc (() [./~/vue-clazy-load/src/clazy-load.js:8,0][static/js/vendor.636071240149cb133e9f.js:33092,9]
    

    Is it critical?

    bug 
    opened by hackuun 2
  • Not working on mobile devices

    Not working on mobile devices

    image loading works fine from desktop regardless of browser but when i tried it on mobile the clazy loader keeps on loading and the images are not loaded

    opened by jxclsv 1
  • Emit 'load' with event parameter

    Emit 'load' with event parameter

    I love this component! It's saved me a bunch of time.

    Is the component's load event supposed to include the $event parameter?

    I want to change the style of the component after the 'load' event fires (specifically, change the background image to the newly loaded img). But I can't access the $event parameter in my handler.

    <clazy-load v-bind:src="item.thumbnail" v-on:load="myHandler(item.thumbnail)">
      <img :src="item.thumbnail" style="display:none"/>
      <div slot="placeholder">Loading...</div>
    </clazy-load>
    
    function myHandler(thumbnail, event) {
        event.target.style.backgroundImage = 'url(' + thumbnail + ')';
    }
    

    I'm new to Vue, so it's entirely possible that I'm missing something obvious.

    opened by dfector 1
  • Feature: CORS mode opt-in

    Feature: CORS mode opt-in

    Summary

    This PR resolves #11 by adding a crossorigin prop that can be used to opt-in to CORS mode for the cross-origin image requests.

    Example:

    <clazy-load src="https://other-domain.com" crossorigin="anonymous">
      <img src="https://other-domain.com">
      <div class="preloader" slot="placeholder">
        Loading message
      </div>
    </clazy-load>
    

    This allows the lazily-loaded images to make cross-origin requests with CORS mode allowing them to be properly cached using a Workbox Service Worker cacheFirst strategy.

    Other

    I wasn’t sure if I needed to or not, but I ran npm run build and generated new files in the dist/ directory as well.

    Any feedback is greatly appreciated, thank you! 😉

    opened by gerardo-rodriguez 1
  • Allow configuration of `crossOrigin` img attribute

    Allow configuration of `crossOrigin` img attribute

    First off, thanks for this Vue plugin! 😄

    I'm finding myself in a situation where I need to have the lazily-loaded images have an attribute of crossorigin="anonymous" because they are cross-origin images (e.g. CDN). It'd be great if this could be configured via a prop.

    Something like:

    props: {
      /**
       * CrossOrigin flag
       * @type {Boolean}
       */
      crossOrigin: {
        type: Boolean,
        default: false
      },
      /**
       * CrossOrigin setting ("Anonymous" | "Use Credentials")
       * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-crossorigin
       * @type {String}
       */
      crossOriginType: {
        type: String,
        default: 'Anonymous'
      }  
    }
    

    Then when the image is constructed, use those values to add the crossorigin attribute if configured to do so.

    let img = new Image
    
    if (this.crossOrigin) {
      img.crossOrigin = this.crossOriginType
    }
    

    The problem I'm running into is that I'm using a Service Worker and it is trying to use a cacheFirst strategy to cache these cross-origin requests. All of my lazily loaded images don't get cached as they are coming back as opaque responses due to not setting the crossOrigin attribute on creation of those images.

    Thanks again! 😉

    opened by gerardo-rodriguez 0
  • TypeScript Typings and Definitions

    TypeScript Typings and Definitions

    As we prepare for the 1.0 release, I'd like to ask for help.

    I'm still a begginner with TypeScript, but I want to make this component fully compatible with as much different setups as possible. So, if anyone could do me a little favor and give me a hand with declaring TypeScript types and definitions, I'll really appreciate it.

    There's no need for an actual PR with all types and everything declared, as I want to learn how to do it, I'd love it if you could point me to some example or docs about it.

    Thank you all for using Vue Clazy Load and contributing!

    help wanted 
    opened by matheusgrieger 0
Releases(v0.4.2)
Owner
Matheus Grieger
Experienced JavaScript developer moving to game development with Unreal Engine.
Matheus Grieger
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
Lazy load background images for Vue 2

Lazy Background Images for Vue vue-lazy-background-images A simple Vue component for lazy loading background components. This component is only for ba

Darryn Ten 68 Apr 7, 2022
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
Vue 2 image and video loader supporting lazy loading, background videos, fixed aspect ratios, low rez poster images, transitions, loaders, slotted content and more.

Vue Visual 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 brows

Bukwild 56 Sep 9, 2022
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

JounQin 36 Sep 25, 2022
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

Kenny Krosky 0 Oct 21, 2021
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

Norman 25 Aug 11, 2021
: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

Ademola. 98 Apr 24, 2021
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

Gustavo Ocanto 63 Jul 19, 2022
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

Cube 4 Jun 19, 2020
A Vue lazy loading directive.

A Vue lazy loading directive.

Vue Interface 0 Feb 4, 2022
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

Vincent Guo 8 Jul 30, 2020
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

OMER ANWAR 18 Sep 26, 2022