Fuzzy placeholder image lazy loading

Lazy loading principle:

• The original src picture is a small picture
• When the page scrolls to the location of the image or a certain distance from the image to start loading the original image
• After the original image is loaded, change the src of the image to the src of the original image

Use a picture of the original fuzzy preview placeholders to delay loading static pictures, reducing the anxiety of the user waiting.
Use sqip to generate image preview placeholder, js control replace the placeholder image after the original image is loaded.
Placeholder small size, fast network transmission. Friendly in user experience.
Below we use a libraryless dependency in the easiest way to achieve a fuzzy preview of the load.

1, install sqip (https://github.com/technopagan/sqip);

2, use the installed sqip generated preview picture.

sqip -o lazyload.svg lazyload.jpg

3, in the image to be lazy loading structure is as follows

<img class="lazyload" src="lazyload.svg" data-src="lazyload.jpg"  />

4, after the document is loaded, use js to change the preview image

window.onload = function () {

 var lazyload = doc.querySelectorAll('.uu-lazyload');

    if (lazyload) {
    
        for (var i = 0, l = lazyload.length; i < l; i++) {
            var sourceImg = lazyload[i].getAttribute('data-src');
            var img = new Image();
    
            img.src = sourceImg;
    
            img.onload = (function (index) {
                lazyload[index].src = img.src;
            })(i);
        }
       
    }

};

There are many ways to lazy loading, there are many libraries. Using this method above can handle some fixed simple static large picture.