For smart Primates & ROBOTS (oh and ALIENS ).

Blogroll

Tuesday, March 17, 2015

Lazy load image

If your site is loading slow then then main causes could be heavy images. So if you remove those images then your site load fast. but if those images are the main features of your product or web site then you will not remove those images. So what will you do?
Load those images one by one on demand then it will make difference when loading site.
So the solution is lazy load image will help you to load your site fast.

To implement lazy load image you need to download jquery.js and jquery.lazy.js from jquery site

I have made three methods to load image lazy, Use one method from below 3 methods:
// Method 1
    jQuery(document).ready(    function() { jQuery("img.lazy").lazy(    {
                                                                    effect: "fadeIn",
                                                                    effectTime: 1500 ,
                                                                    enableThrottle: true,
                                                                    throttle: 250
                                                                    }
                                                                );
                                       }
                          );

// Method 2
    //jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "slideIn", effectTime: "slow" }); });

//Method 3
    //jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "fadeIn", effectTime: 1500 }); });


 Use in HTML as below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
  <script type="text/javascript" src="jquery.js"></script> 
  <script type="text/javascript" src="jquery.lazy.js"></script>
  <script>
    jQuery(document).ready(    function() { jQuery("img.lazy").lazy(    {
                                                                    effect: "fadeIn",
                                                                    effectTime: 1500 ,
                                                                    enableThrottle: true,
                                                                    throttle: 250
                                                                    }
                                                                );
                                       }
                          );
    // alternative 1
    //jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "slideIn", effectTime: "slow" }); });
    // alternative 2
    //jQuery(document).ready(function() { jQuery("img.lazy").lazy({ effect: "fadeIn", effectTime: 1500 }); });
  </script>
</head>
<body>
<img class="lazy" data-src="1.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="2.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="3.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="4.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="5.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br /><img class="lazy" data-src="23.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="24.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="25.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />

...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....
...... LOAD MORE IMAGES HERE ....


<img class="lazy" data-src="26.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="27.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="28.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="29.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="30.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="31.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br />
<img class="lazy" data-src="32.jpg" src="" border="0" alt="Lazy Image" /><br/><br /><br/><br /><br/><br /><br/><br /></body>
</html>
Share:

0 comments:

Post a Comment

Multiple attribute passing in querySelectorAll

Multiple attribute passing in querySelectorAll     Here I am demonstrating code to how to pass multiple attributes in querySelectorAll. <...

Ads Inside Post

Powered by Blogger.

Arsip

Blog Archive