lazycat
v0.4.1
Published
A lazy loader as smooth as a cat
Downloads
6
Readme
LazyCat v0.4.1
A simple lazy loader for images and videos
To see pages using LazyCat in production, please refer to this list.
Download
Installation
Option 1: HTML
<script src="LazyCat.min.js"></script>Option 2: Node.js & npm
In terminal, execute:
$ npm i lazycat --saveand import in JS:
var LazyCat = require('lazycat'); // CommonJSor alternatively:
import LazyCat from 'lazycat'; // ES6Quick Start
After downloading LazyCat.js, use below code to quick-start:
Image loading on <img> tag:
<!DOCTYPE html>
<html>
<body>
<img class="lazycat-target" data-lazycat-image="sample.png" />
<script src="LazyCat.js"></script>
<script>
LazyCat.image('.lazycat-target', function(){
console.log('callback loaded');
});
</script>
</body>
</html>Image loading on <div> tag:
<!DOCTYPE html>
<html>
<body>
<div class="lazycat-target" data-lazycat-image="sample.png" style="width:80%;height:80vh"></div>
<script src="LazyCat.js"></script>
<script>
LazyCat.image('.lazycat-target', function(){
console.log('callback loaded');
});
</script>
</body>
</html>Video loading with time out:
<!DOCTYPE html>
<html>
<body>
<video class="lazycat-target" src="sample.mp4" preload="none" autoplay loop></video>
<script src="LazyCat.js"></script>
<script>
LazyCat.video('.lazycat-target', function(){
console.log('callback loaded');
}, 20000); // `callback` being executed after 20 seconds.
</script>
</body>
</html>Video loading using blob:
<!DOCTYPE html>
<html>
<body>
<video class="lazycat-target" data-lazycat-video="sample.mp4" autoplay loop></video>
<script src="LazyCat.js"></script>
<script>
LazyCat.videoBlob('.lazycat-target', function(){
console.log('callback loaded');
}, function(){
console.log('error occurred');
});
</script>
</body>
</html>APIs
LazyCat.image()
Load image. It can load srcs on an <img> tag or background-image on any DOM element.
Syntax:
Arguments:
selector{string} Target DOM element for lazy load. The DOM element must have an attributedata-lazycat-image="[source URL]".callback{function} (optional) Callback function calling after loading is successfully completed.callbackError{function} (optional) Callback function calling after loading failed.
LazyCat.video()
Load video. No error callback is available, but loading time out is applicable.
Syntax:
Arguments:
selector{string} Target DOM element for lazy load. The DOM element must have an attributesrc="[source URL]"andpreload="none".callback{function} (optional) Callback function calling after loading is successfully completed. Successful loading here means the video’sreadyStatebecoming3or bigger.timeout{integer} (optional) Time out for callback execution in millisecond. Iftimeoutis set,callbackwill be executed regardless of the target video's status. If the value is0or not provided it will wait forever until the video’sreadyStatebecomes3or bigger. Default value is0.
LazyCat.videoBlob()
(Experimental) Load video using blob. It will always try to load full length of the video and execute either callback (when suceeded), or callbackError (when failed).
Syntax:
Arguments:
selector{string} Target DOM element for lazy load. The DOM element must have an attributedata-lazycat-video="[source URL]".callback{function} (optional) Callback function calling after loading is successfully completed. Successful loading here means successful loading of the entire portion.callbackError{function} (optional) Callback function calling after loading failed.
Live Links
Browser Support
LazyCat supports all major modern browsers including IE 10+.
License
MIT