Lazyload is a jQuery plugin improved load images in the site long. External image frame will only show when users drag to. Using the site
Lazyload in length with multiple images will make pages load faster, in some cases it also helps reduce the load to the web server.
Usage
First you need to download jQuery and Lazyload plugin. Then add in your card <head> site:
<!-- Library jQuery -->
<script type="text/javascript" src="js/jquery.min.js"></script>
<!-- jQuery Lazy Load -->
<script type="text/javascript" src="js/jquery.lazyload.pack.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload(); // lazyload all image on page
});
</script>
HTML
Lazyload offer some choice as to load a portion of the image, using image replacement, call the event, when a picture effect, set the time to upload photos ... You can see the homepage of the farms lazyload
The following code will load first 200px of the image before the image appears
$("img").lazyload({ threshold : 200 });
Using image replacement
$("img").lazyload({ placeholder : "img/grey.gif" });
Default :
Photo accompany replacement plugin 1x1px gif image, you can replace it with your own picture links
When using blur effect appears
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
Download
