JavaScript Library For Progressive Image Loading Effect – Interlace.js

Category: Javascript , Loading , Recommended | July 1, 2016
Views Total:1,198 views
Official Page:Go to website
Last Update:July 1, 2016


JavaScript Library For Progressive Image Loading Effect – Interlace.js


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

See also:

How it works:


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"

Executing all uninitialized Interlace elements.


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

var iImg ={
    interlaceSrc: "1.jpg",
    interlaceLow: "1.low.jpg"

Available options which can be passed an object to method:

var iImg ={
    // 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.
    // Set ALT attribute to Interlace-element.
    interlaceAlt: "data-interlace-alt"

You Might Be Interested In:

Leave a Reply