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)

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

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)
  }
});