Swap Image Sources On Scroll (Lazy Load) - jQuery lazy-out.js
File Size: | 243 KB |
---|---|
Views Total: | 608 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

lazy-out.js is a small jQuery plugin for lazy loading images that automatically replace the placeholders with the original images when the images become visible within the viewport.
How to use it:
1. Download and place the JavaScript file lazy-out.js
after jQuery.
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"> </script> <script src="lazy-out.js"></script>
2. Insert an image to your webpage using the following data
attributes.
- class="lazy": required
- data-orig-file: path to the original image
- data-orig-size: image size
- data-lazy-src: path to the placeholder image
<img class="lazy" data-orig-file="https://source.unsplash.com/random/800x600" data-orig-size="800,600" data-lazy-src="https://via.placeholder.com/800x600" >
3. That's it. You're able to override the defaultdata
attributes as follows:
var LazyOut = [{ "lazySrc": "lazy-src", "originalSrc": "orig-file", "originalSize": "orig-size" }],
4. Specify the top offset the plugin starts loading the original image.
var LazyOut = [{ "threshold": 300 }],
This awesome jQuery plugin is developed by kurogedelic. For more Advanced Usages, please check the demo page or visit the official website.