JavaScript Library For Progressive Image Loading Effect – Interlace.js

Category: Javascript , Loading , Recommended | July 1, 2016
Author: Wildtyto
Views Total: 3,006
Official Page: Go to website
Last Update: July 1, 2016
License: MIT

Preview:

JavaScript Library For Progressive Image Loading Effect – Interlace.js

Description:

Interlace.js is a lightweight JavaScript library used to create a progressive image loading effect with a blur effect as seen on Medium.com. Useful to reduce the page load time to improve the user experiences.

See also:

How it works:

Interlace.js

How to use it:

Include the Interlace’s JavaScript and Stylesheet on the html page.

<link href="interlace.min.css" rel="stylesheet">
<script src="interlace.min.js"></script>

Prepare low quality images for original images and then insert them into a DIV element using data-interlace attribute as shown below:

<div data-interlace-src="1.jpg"
     data-interlace-low="1.low.jpg">
</div>

Executing all uninitialized Interlace elements.

Interlace.scan();

You can also define the images in the JavaScript and append them to any container element within the document.

var iImg = Interlace.new({
    interlaceSrc: "1.jpg",
    interlaceLow: "1.low.jpg"
});

document.body.appendChild(iImg);

Available options which can be passed an object to Interlace.new method:

var iImg = Interlace.new({

    // Original image file path.
    interlaceSrc: "1.jpg",

    // Low-quality image file path.
    interlaceLow: "1.low.jpg",

    // Toggle visibility of loading icon.
    interlaceTip: false,

    // Set title attribute to Interlace-element.
    interlaceTitle:"data-interlace-title",

    // Set ALT attribute to Interlace-element.
    interlaceAlt: "data-interlace-alt"
    
});

You Might Be Interested In:


Leave a Reply