September 5, 2020
Category : Javascript
jQuery
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>
If you want to get more information from here : EagerImageLoader.
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of Aatman Infotech. I live in India and I love to write tutorials and tips that can help to other artisan. I am a big fan of PHP, Laravel, Angular, Vue, Node, Javascript, JQuery, Codeigniter and Bootstrap from the early stage. I believe in Hardworking and Consistency.
