Swap Image Sources On Scroll (Lazy Load) - jQuery lazy-out.js

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.