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:

• Medium-style Image Loading Effect – pilpil

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