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

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.

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.

  • Publication date: 19.12.2018
  • Source