How to Display a loading gif before image loads using Eager ImageLoader?

Today now in this post i will show you how to Display a loading gif image before a image loads using Eager ImageLoader plugin in Jquery ? We know that Eager ImageLoader is a plugs give us the lazy loading before the image loads.Now in this example we can load our gif image that we want show before the main image load. So now in this example i will use eager-image-loader plugin.

As we can see the bellow preview on that before the image load. So at first we need to give the path of gif image “./upload/loading.gif” for instead of our gif image path. If we want to get this image then we can get from the demo.

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

Read Also : How to Create Custom Blade Directive in Laravel?

Thanks for read. I hope it help you. For more you can follow us on facebook.

About Shahriar Sagor

My name is Shahriar sagor. I'm a developer. I live in Bangladesh and I love to write tutorials and tips that will help to other Developer's. I am a big fan of PHP, Javascript, JQuery, Laravel, Codeigniter, VueJS, AngularJS and Bootstrap from the early stage.

View all posts by Shahriar Sagor →