Javascript

【Javascript】徐々にイメージをロードするためのJavaScriptライブラリ。Progressively

October 22, 2016

Progressivelyは徐々にイメージをロードするためのJavaScriptライブラリ。

Usage

<head>
<link rel="stylesheet" src="progressively.min.css"> 
</head>
<body>

  <figure class="progressive">
    <img class="progressive__img progressive--not-loaded" data-progressive="img/highQualityImg" src="img/lowQualityImg">
  </figure>

  <script src="progressively.min.js"></script>
  <script>
    progressively.init(options);
  </script>
</body>

Options

throttle
delay
onLoad
onLoadComplete

Example

progressively.init({
  delay: 50,
  throttle: 300,
  imgload: function(elem) {
    console.log(elem);
  },
  afterload: function() {
    console.log('All images have finished loading!');
  }
});

MIT

Demo/Download