- Lazy Load is a jQuery plugin written in JavaScript. It delays loading of images in long web pages.
- Images outside of viewport (visible part of web page) wont be loaded before user scrolls to them.
- Using Lazy Load on long web pages containing many large images makes the page load faster.
- Browser will be in ready state after loading visible images. In some cases it can also help to reduce server load.
How to Use?
1) Include the jquery files
<script src=”jquery.js” type=”text/javascript”></script>
<script src=”jquery.lazyload.js” type=”text/javascript”></script>
2)You must alter your HTML code. Put the place holder image into src attribute. Demo pages use 1×1 pixel grey gif.
URL of the real image must be put into data-original attribute.
It is good idea to give Lazy Loaded image a specific class. This way you can easily control which images plugin is binded to.
<img src=”img/grey.gif” data-original=”img/example.jpg” width=”640″ heigh=”480″>
3) then in your code do:
$(“img.lazy”).lazyload({
threshold : 200 ,
effect : “fadeIn”,
});
