Jquery – Display a loading gif image before a image loads using Eager ImageLoader plugin
In this post we will give you information about Jquery – Display a loading gif image before a image loads using Eager ImageLoader plugin. Hear we will give you detail about Jquery – Display a loading gif image before a image loads using Eager ImageLoader pluginAnd how to use it also give you demo for it if it is necessary.
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 style="height:900px;">
<h2>Display a loading gif image before a image loads</h2>
<img data-src="https://onlinecode.org/upload/Laravel-google-captcha.png" src="./upload/loading.gif" >
<img data-src="https://onlinecode.org/upload/Laravel-5-Repository-Pattern-Tutorial.png" src="./upload/loading.gif" >
<img data-src="https://onlinecode.org/upload/PHP-Angular-JS.png" src="./upload/loading.gif" >
<script type="text/javascript">
new EagerImageLoader();
</script>
</div>
</body>
</html>
If you want to get more information from here : EagerImageLoader.
Hope this code and post will helped you for implement Jquery – Display a loading gif image before a image loads using Eager ImageLoader plugin. if you need any help or any feedback give it in comment section or you have good idea about this post you can give it comment section. Your comment will help us for help you more and improve us. we will give you this type of more interesting post in featured also so, For more interesting post and code Keep reading our blogs