jQuery Plugin To Load Background Images On the Right Viewport - lazysizebg
File Size: | 5.59 KB |
---|---|
Views Total: | 1015 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

lazysizebg is an ultra-light jQuery responsive image solution which automatically delivers correct solution background images at specified breakpoints to reduce network traffic and increase page load speed.
How to use it:
1. You first need to load the jQuery lazysizebg plugin after jQuery library:
<script src="//code.jquery.com/jquery-3.0.0.min.js"></script> <script src="jquery.lazysizebg.min.js"></script>
2. Add different solution background images to your container using data-lzbg
attributes as follows:
- data-lzbg-sm: image for small screen (<768px)
- data-lzbg-md: image for medium screen (<992px)
- data-lzbg-lg: image for large screen (>992px)
- data-lzbg: default image
<div class="lazyloadme" data-lzbg-sm="sm.jpg" data-lzbg-md="md.jpg" data-lzbg-lg="lg.jpg"> </div>
3. Initialize the plugin by calling the function .lazysizebg()
on the container:
$('.lazyloadme').lazysizebg();
4. Change the default breakpoints during init.
$('.lazyloadme').lazysizebg({ mdMin:768, lgMin:992 });
Change log:
2016-09-10
- Fixed issue with writing over inline styles set on the element.
2016-07-05
- Removed console.log
This awesome jQuery plugin is developed by philipdbrown. For more Advanced Usages, please check the demo page or visit the official website.