Interlace.js is a pure JavaScript plugin that performs stunts and previews when an image file is loaded like overlapping images.

progressive image loading jquery, lazy loading with blurred image effect, progressive image flutter, progressive image loading example

A Simple and Easy Image Carousel Slider Plugin With Lazy Loading | square1

How to make use of it:

1. Include Interlace’s JavaScript and Stylesheet on the HTML page.

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

2. Prepare low-quality images of the original images and then insert them into the DIV element using the data interlacing property as shown below:

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

3. Execute all uninitialized nest elements.

Interlace.scan();

4. You can also define images in 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);

5. Available options can pass an object to the new Interlace 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"
    
});

Options

###interlaceSrc###

Original image file path.

type: String / attribute-name: data-interlace-src / required

###interlaceLow###

Low-quality image file path.

type: String / attribute-name: data-interlace-low

###interlaceTip###

Toggle the visibility of the loading icon.

type: Boolean / attribute-name: data-interlace-tip / default: false

###interlaceTitle###

Set title attribute to Interlace-element.

type: String / attribute-name: data-interlace-title

###interlaceAlt###

Set ALT attribute to Interlace-element.

type: String / attribute-name: data-interlace-alt

Progressive Image Loading Effect, Interlace.js Plugin/Github

See Demo And Download

Official Website(CodyWildtyto): Click Here

This superior jQuery/javascript plugin is developed by CodyWildtyto. For extra Advanced Usage, please go to the official website.