useful jQuery plugin which can load images on page scroll called lazy loading, if you used high resolution images on your website then it’s a best solution for you to make your web site looks professional. This makes the page load faster and reduce server traffic since the client loads the images in the region what they look at.
I have used a plugin Devrama Lazyload you can download it and use it in your projects.
HOW TO USE IT
First of all include jQuery and this plugin in your html page.
<script src="jquery-1.9.1.min.js"></script> <script src="http://demo.phpgang.com/lazy-loading-images-jquery/jquery.devrama.lazyload.min-0.9.3.js"> </script>
Images markup used data attribute not src attribute let see example.
<img data-size="1024:588" data-lazy-src="images/1.jpg" /> <img data-size="1024:588" data-lazy-src="images/2.jpg" /> <img data-size="1024:588" data-lazy-src="images/3.jpg" /> <img data-size="1024:588" data-lazy-src="images/4.jpg" /> <img data-size="1024:588" data-lazy-src="images/5.jpg" /> <img data-size="1024:588" data-lazy-src="images/6.jpg" /> <img data-size="1024:588" data-lazy-src="images/7.jpg" /> <img data-size="1024:588" data-lazy-src="images/8.jpg" /> <img data-size="1024:588" data-lazy-src="images/9.jpg" />
<script type="text/javascript"> $(function(){ $.DrLazyload(); }); </script>his above function apply lazy loading on all your images which is on lazy loading format.
You can also use this lazy loading on a particular area of your document using class or id.
<script type="text/javascript"> $(function(){ $('#main').DrLazyload(); }); </script>This code will apply lazy loading on main div only.
No comments:
Post a Comment