|File Size:||3.03 KB|
|Official Website:||Go to website|
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