Image loading effect using jQuery

In this tutorial you will learn about image loading effect using jQuery. Using JQuery, Initially load all the images in a variable and bind into an html element using ID. Here I referred jquery-3.2.1.slim.min.js and CSS. The CSS class you can download from the github.

https://github.com/SunnyWoo/ImageLoadEffect

Example code:

<h2>Loading Effect</h2>

<link href="~/css/main.css" rel="stylesheet" />

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"

        integrity="sha256-k2WSCIexGzOj3Euiig+TlR8gA0EmPjuc79OEeY5L45g="

        crossorigin="anonymous"></script>

<script type="text/javascript">

    varimgList = [

                  "http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575926968307712/598c24ea85c265245.jpg",
                  "http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575928688230400/598c24ea85f8e8217.jpg",
                  "http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575930797707264/598c24ea8617e2486.jpg",
                  "http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575933506277376/598c24ea863c51554.jpg",
                  "http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575936371122176/598c24ea865279731.jpg",
                  "http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575937634938880/598c24ea866901074.jpg",
                  "http://56lvmbzh.droibaascdn.com/droi/56lvmbzhOSd5VOT1TNyu3OBXp8oVaHBnlQCN3ToB/895575939165601792/598c24ea867f08783.jpg"

    ];

 

    functionloadImage(src, callback) {

        varimg = document.createElement("img");

        img.src = src;

        img.addEventListener("load", function() {

            if(this.complete) {

                callback();

            }

        });

    }

 

    varbindHtml = function () {

        varhtml = '';

        for(var i = 0; i < imgList.length; i++) {

            html += '<span class="col-xs-4 wx-pipmiddle-xs"><span><img data-src="'+ imgList[i] + '" /></span></span>';

        }

        $("#rowList").html(html);

 

        // Loop to judge all img

        $("#rowListimg").each(function() {

            var_this = $(this);

            if(_this.attr("src")== undefined) {

                var_src = _this.attr("data-src");

                loadImage(_src, function() {

                    //load successfully added after the implementation of the delay can be deleted

                    setTimeout(function() {

                        _this.attr("src", _src);

                        _this.parent().css("background-image", "none");

                    }, 400);

                });

            }

        });

    };

 

    $(document).ready(function() {

 

        bindHtml();    });</script><div id="rowList" class="row pic3"> </div>

IMAGE LOADING EFFECT: