Easy Image Loader & Preloader Plugin With jQuery - lazyRender
File Size: | 8.08 KB |
---|---|
Views Total: | 2528 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
lazyRender is a simple jQuery image lazy loader & preloader plugin for lazy loading images when needed as well as pre-loading specific images to improve the page loading speed. Supports both img tag and background image.
How to use it:
1. To get started, you need to load jQuery library and the jQuery lazyRender plugin's files in the document.
<link href="jquery.lazyRender.css" rel="stylesheet"> <script src="//code.jquery.com/jquery-3.1.1.slim.min.js"></script> <script src="jquery.lazyRender.js"></script>
2. Initialize the plugin and we're ready to go.
$(document).lazyRender();
3. Lazy load an image using the data-lazy-src
attribute instead of the original src
.
<img data-lazy-src="1.jpg" width="400" height="300">
4. If you'd like to lazy load a background image for your container.
<div class="demo" data-lazy-class="has-background"></div>
.demo.has-background { background-image: url(1.jpg); }
5. Preload your image for further use:
<i data-preload-image="1.jpg"></i>
6. You can also render the images manually:
$('#manually').on('click', function () { $(document).lazyRender('render'); });
This awesome jQuery plugin is developed by danilo-valente. For more Advanced Usages, please check the demo page or visit the official website.