README-en.md

img-lazy-processor

Through the modern browser Observer API of Mutation Observer and Intersection Observer, lazy loading of img tags and friendly prompts for empty addresses or loading failures Because the Mutation Observer and Intersection Observer requires compatibility, the Mutation Observer can reference the intersection-observer. Or add the polyfill polyfill/intersection-observer.js modified in this project.

 import 'img-lazy-processor/polyfill/intersection-observer.js'

vue directive

  import Vue from 'vue'
  import imgHandleInit from 'img-lazy-processor/vue-directive/imgHandle.js'
  imgHandleInit(Vue)

Instructions can be used with reference to ./vue-directive/imgHandle.js

Usage

yarn add img-lazy-processor

Using <script> tags in the HTML:

  <!-- download  dist/img-lazy-processor.min.js -->
  <script src="${path}/img-lazy-processor.min.js"></script>

Using a module loader

import ImgLazyProcessor from 'img-lazy-processor'

/*  html
  ...
  <img id="target" origin-src="src" />
  ...
*/

// js
import ImgLazyProcessor from 'img-lazy-processor'
let elem = document.getElementById('target')

let imgLazyProcessor = new ImgLazyProcessor({
    //global settings

    // whether to record the status in the dataset
    dataset: true,

    // emptyImg: '', prompt image when no path
    // errorImg: '', prompt image when error
    // loadImg: '', prompt image when load

    // bgColor default transparent
    bgColor: '#aec2d3', // value like background-color

    // bgSize the size of the prompt image (emptyImg, errorImg, loadImg) default 50%
    bgSize: '40%', // value like background-size

    // the position of the prompt image (emptyImg, errorImg, loadImg) default center
    bgPosition: 'center', // value like background-position

    // whether prompt image is repeated (emptyImg, errorImg, loadImg) default no-repeat
    bgRepeat: 'no-repeat'  // value like background-repeat

    // Whether the image is delayed to trigger loading, when you refresh the list quickly, you don't want to waste resources to load the image that was brushed past.
    delay: false,

    // delay time
    delayTime: 300,

    // Image error or no image disables all events, the principle is to add 'pointer-events: none;' to the element
    disable: false
  })

  // observe img element
  imgLazyProcessor.observe(elem, {
    //local settings, specific reference to global settings
  })

  // Reset the img element local settings
  imgLazyProcessor.setElemOption(elem, option)

  // unobserve img element
  imgLazyProcessor.unobserve(elem)

  // destroy instance
  imgLazyProcessor.destroy()

Author

img-lazy-processor © SCWR, Released under the MIT License.

GitHub @SCWR