JQuery Show Loading Gif Image While Load Image Example

By Hardik Savani November 5, 2023 Category : Javascript jQuery

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:

Read Also: Laravel JQuery Ajax Loading Spinner 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>

If you want to get more information from here : EagerImageLoader.

I hope it can help you...

Tags :

We are Recommending you

Popular Posts

Categories

Latest Posts