fog

A lazy load effect library for images

Preview

Note: the format of the preview is webp, Safari browser or other browsers may not support viewing.

Getting Started

Install

• via npm

  npm install @kilohaty/fog --save

  // using ES6 modules
  import fog from '@kilohaty/fog';
  
  // using CommonJS modules
  var fog = require('@kilohaty/fog')

• via script

  <!-- you can find the library on window.fog -->
  <script src="/dist/bundle/fog.js"></script>

Setup Images

In HTML, add the following attributes to your images. ( note: both images must have the same aspect ratio)

| attribute name | required | description | |----------------|-----------|-------------| |data-src | ✓ | source image url | |data-src-mini | | mini image url | |data-width | | image width | |data-height | | image height |

<img src=""
     data-width="400"
     data-height="200"
     data-src="https://example.com/example_source.jpg" 
     data-src-mini="https://example.com/example_source.jpg.mini.jpg"
     alt="example" />

Set global config (Optional)

| config name | value type | default value | description | |-------------|------------|---------------|-------------| |display | string | inline-block | display style of wrapped div| |width | number | 1 | image width | |height | number | 1 | image height | |backgroundColor | string | | skeleton image color | |transitionDuration | number | 1 | opacity transition duration (second) | |retryTimes | number | 2 | the number of retry when image load failed | |retryDuration | number | 3000 | retry interval time (ms) | |miniImgRule | Function | | rule function for mini image | |errorImage | string | | set replacement image when source image load failed |

fog.setConfig({
  width: 400,
  height: 200,
  backgroundColor: '#ffff00',
  transitionDuration: 0.5,
  retryTimes: 1,
  retryDuration: 2000,
  miniImgRule: function (sourceImageUrl) {
    return sourceImageUrl + '.mini.jpg';
  },
  errorImage: 'https://example.com/error.jpg',
});

Init

var el = document.querySelector('img');

// simple init
fog.init(el);

// or with options
fog.init({
  el: el,
  onSuccess() {
    // source image load success
  },
  onFail() {
    // source image load fail
  },
  onComplete() {
    // source image load complete (success or fail)
  }
});