In this tutorial, We will learn how to display a loading gif image before an image load using eager image loader plugin. 


Example:

<html lang="en">
    <head>
        <title>Jquery - Display a loading gif image before a image loads</title>
        <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
        <script src="https://raw.githubusercontent.com/anseki/eager-image-loader/master/eager-image-loader.min.js"></script> 
        <style type="text/css">
            img{
                width:330px;height:220px;border:1px solid #a1a1a1;
            }
        </style>
    </head>
    <body>
        <div class="container text-center" style="height:900px;">
            <h2>Display a loading gif image before a image loads</h2>
            <img data-src="img1.jpg" src="loading.gif" class="img-1">
            <img data-src="img2.jpg" src="loading.gif" class="img-1">
            <img data-src="img3.jpg" src="loading.gif" class="img-1">
            <script type="text/javascript">
                new EagerImageLoader();
            </script>
        </div>
    </body>
</html>

Thanks, May this example help you....