Tag : Loading
Today, we learn how to use lazy load images in our website. In todays market you can see it's very important if your site not take more time in loading.
jquery.lazyload.js plugin provide us to forces page images to pause the loading process until the reader has viewed that specific area of the page. lazyload js is very helpful for make less load your web page.
In this post i give you very simple and basic example of lazy load images in my html page. Sometimes you see take a long time to load our web images, that's way taking lot's off time to load, But This example through you can prevent im.....
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.
<strong>Preview:</strong>
<img src="/upload/image-upload.png" style="width:100%;border:2px solid red" />
<strong>Example:</strong>
<pre class="prettyprint lang-html">
<html lang="en">.....
Sometimes we need to detect upto image load successfully, for example you want to do print text instead of image before load image. so you can do that using jquery load and error method. you can see bellow example:
<strong>Example:</strong>
<pre class="prettyprint lanh-js">
<script type="text/javascript">
$('.image')
.load(function(){
console.log("Now loaded correctly");
})
.error(function(){
console.log("Found Error in loading image");
});
</script>
</pre>
Sometimes, we want to display loading image or animation or text when fire every ajax request. In not for only one ajax request, but if you want to load image on every ajax request then you can do that using bellow example.
I use ajaxStart() and ajaxComplete() function for show image until All POST or GET Ajax request. this both function will execute one each $.ajax request.
<strong class="example">Example:</strong>
<pre class="prettyprint lang-js">
<script type="text/javascript">
$(document).ready(function()
{
$(document).ajaxStart(function(){
$('#process_img').cs.....
Jquery - Show hide password in Password textbox using checkbox.
Open Post
Laravel 5 and Vue JS CRUD with Pagination example and demo from scratch
Open Post
How to get keys name from array using array helper in PHP Laravel ?
Open Post
Jquery - input tags plugin example using jquery.tagsinput.js plugin
Open Post
How to retrieve number of twitter followers count without authentication or api ?
Open Post
MySql comma separated column join in PHP Laravel 5
Open Post
