jQuery Lazy Load Plugin For Background Images - nLazy

nLazy is a super lightweight (<1kb) jQuery plugin which delays loading of background images until the containers enter viewport. Also comes with a fade-in effect when the background image is completely loaded.

How to use it:

1. Add the CSS class 'nl-image' to the container and specify the path to your background image using data-background attribute as this:

<div class="nl-image" 
     data-background="bg.jpg">
     <h2>Content Here</h2>
</div>

2. Download and include the jQuery nLazy plugin along with the latest jQuery library at the end of the document.

<script src="//code.jquery.com/jquery.min.js"></script>
<script src="nLazy.js"></script>

3. That's it. The plugin will automatically add the following CSS classes to your container depending on the image loading status.

• nl-loading: when the background image is loading
• nl-loaded: when the background image is loaded

---

This awesome jQuery plugin is developed by naoxink. For more Advanced Usages, please check the demo page or visit the official website.