November 5, 2023
Category : Javascript
jQuery
JQuery Show Loading Gif Image While Load Image Example
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...
;void(0);){kind=link}
Hardik Savani
I'm a full-stack developer, entrepreneur and owner of ItSolutionstuff.com. 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.
Subscribe me on: Youtube
We are Recommending you
- How to Remove Special Characters from a String in JQuery?
- JQuery Moment Subtract Month Example
- How to Print Iframe Content using Jquery?
- JQuery Radio Button Change Event Example
- Add Edit Delete Table Row Example using JQuery
- PHP JQuery Chosen Ajax Autocomplete Example
- Codeigniter JQuery Ajax Request Example
- How to Remove Comma from String in JQuery?
- JQuery Add Remove Input Fields Dynamically Example
- How to Disable Right Click Menu using JQuery?
- JQuery Hide and Show Password using Eye Icon Example
- JQuery Datepicker Example using JQuery UI JS
- JQuery Select Box with Search Option using Chosen Plugin
- Preview an image before Upload using jQuery Example
;void(0);){kind=link}