Lightweight JS Library For Lazy Loading DOM Elements – Couch

Preview:

Description:

Couch is a small standalone JavaScript library used to lazy load any DOM elements with a subtle slide animation powered by CSS3 transitions and transforms.

Basic Usage:

Place the couch.js at the end of the document.

<script src="couch.js"></script>

Wrap the DOM elements you want to lazy load into a container element with an unique ID ‘couch’.

<div id="couch">
  <img data-src="1.svg">
  <img data-src="2.svg">
  <img data-src="3.svg">
  ...
</div>

The CSS/CSS3 rules to animate the DOM elements as they come into view.

#couch { max-width: 100%; }
#couch > * {
  opacity: 0;
  max-width: 100%;
  display: block;
  margin: 100px auto 100px auto;
  transform: translateY(100px);
}
.onscreen {
  opacity: 1 !important;
  transition: 1s ease;
  -webkit-transition: 1s ease;
  -moz-transition: 1s ease;
  -o-transition: 1s ease;
  -ms-transition: 1s ease;
  transform: translateY(0px) !important;
  -webkit-transform: translateY(0px) !important;
  -moz-transform: translateY(0px) !important;
  -o-transform: translateY(0px) !important;
  -ms-transform: translateY(0px) !important;
}

Config the lazy load functionality.

var couch = new Couch('couch', {
// sets the distance from the bottom the element needs to be to be loaded
threshold: -1, 
// sets the delay between loading elements.
delay: 10
});