Jquery - Display a loading gif image before a image loads using Eager ImageLoader plugin

Eager ImageLoader plugs give us lazy loading before image loads, in this example you can load your gif image that you want before main image load. In this example i use eager-image-loader plugin.

As you can see bellow preview that before image load. so first you have to give path of gif image "./upload/loading.gif" instead of your gif image path. If you want to get this image then you can get from demo.

Preview:

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="http://itsolutionstuff.com/upload/Laravel-google-captcha.png" src="./upload/loading.gif" class="img-1">
    <img data-src="http://itsolutionstuff.com/upload/Laravel-5-Repository-Pattern-Tutorial.png" src="./upload/loading.gif" class="img-1">
    <img data-src="http://itsolutionstuff.com/upload/PHP-Angular-JS.png" src="./upload/loading.gif" class="img-1">
  <script type="text/javascript">
      new EagerImageLoader();
  </script>
</div>
</body>
</html>