Tag : Loading
ItSolutionStuff.com have tutorials for Loading tag, here you can study articles of Loading tag, Loading tag posts collection, most popular and useful tutorials of Loading tag, here you can find list of all relevant posts and example about Loading tag, we have lists of tutorials and examples about Loading tag. very simple and quick example collection of Latest Loading tag.
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.....
Laravel 5 - category treeview hierarchical structure example with demo
Open Post
Laravel 5 - Generate Captcha code and Validation example using BotDetect package
Open Post
Laravel 5 export to pdf using maatwebsite example
Open Post
How to connect mysql database in node js with example?
Open Post
Laravel 5 - Create Dummy Data using tinker factory
Open Post
PHP - Dynamically Add Remove input fields using JQuery Ajax Example with Demo
Open Post
