jQuery Plugin To Load Background Images On the Right Viewport - lazysizebg

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.