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

File Size: 243 KB
Views Total: 617
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
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" 
<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
      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.