DLL.js

What's going on?

DLL.js lazy loaded a 4K image then triggered a callback function. Here's what was actually in place:

// when finished do some callback
function imageLoadFinished() {
  // doin some cool stuff, you gonna check the scripts.js
}

// we lazy load to the .cover class element
DLL('.cover',imageLoadFinished);

Unlike the examples below, this is an example where the target element has no child elements and is the only subject to DLL lazy load.

Let's do some lazy load on click

In this example, we target the parent .testCol1 element with our function, and DLL lazy loads it's inner elements.

Click me

What happened here? DLL.js lazy loaded an element's children and triggered a function when last item loaded. The code looks like this:

//listening to button click
var btn = document.querySelector('.btn');

// the target element
var el = document.querySelector('.testCol1');

// when load is complete, we run this callback function
function callback(){					
  // do some animation for the element and all children having data-src attribute

  // add loaded class 
  el.classList.add('loaded')
}

// the click handler
function clickExample(){
  // if element is not loaded, we initiate dll.js
  if ( !el.classList.contains('loaded') ){
    DLL(el, callback);
  }
}

// you know the thing
btn.addEventListener('click', clickExample, false);

Let's do some lazy load on scroll

In this example, we target the parent .img-wrapper element with our function, and DLL lazy loads it and it's inner elements. And now we'll scroll down a bit.

What happened here? DLL.js lazy loaded an element with all it's children and triggered a function when last item loaded. The code looks like this:

// the target element
var el = document.querySelector('.testCol2');

// when load is complete, run this callback function
function callback(){					
  //do some animation for the element's children having data-src attribute
  
  //add a class to parent element, to make sure things only work once 
  el.classList.add('.loaded');
}

// your scroll handler
function scrollHandler(){
  //when element is in viewport, we initiate dll.js
  if ( isElementInViewport(el) && !el.classList.contains('loaded') ){
    DLL(el, callback);
  }
}

// another listener, yeey
window.addEventListener('scroll', scrollHandler, false);

Grab the isElementInViewport right here.

Let's play with videos

Similar to the above example, but this time we load a bunch of videos. Check notes below to get a glimpse on how it works:

DLL.js will only target videos with the following structure:

<video id="myVideo" poster="video/my-video.jpg">
  <source data-src="video/my-video.mp4" type="video/mp4">
</video>

If your content has the right structure, you can do everything else just like the usual:

// grab a video
var myVideo = document.getElementById('myVideo');
// initialize for a single video element
DLL(myVideo, callback);

// OR

// grab a wrapper element
var myWrapper = document.getElementById('myWrapper');
// initialize for and element and/or all child elements
DLL(myWrapper, callback);

Both of the above produce the same effect.

In case you missed the features

TypeScript sourced code
Lazy load a single element that has data-src attribute, ideally an <img> or a layer element with no child elements
With DLL.js works with videos as well. How cool is that?
Works for <img> and other elements as well, to update the background-image
When an element other than image/video is targeted, it will also lazy load it's child elements having the data-src attribute
You can also call DLL to do lazy load for all elements in a page at once, by simply using DLL();
DLL has callback ability and it's triggered when the target element is loaded or it's last element is loaded
With a elementInViewport function you can lazy load elements on scroll, like the example above
It's super light, around 1Kb in size and you can do so much with it
Give it polyfills and legacy browsers will thank you

I highly recommend

For SEO reasons, don't use it for content images unless their really big and affect the page load speed
Use it wisely and you can achieve higher page load speed while allowing crawlers to cache your images, this can be done using two images: one hidden, with proper src attribute and another one visible with data-src attribute
Don't do DLL(); or DLL('body'); unless you really want to do that, you may want to change what happens with each element alone
You may want to add a CSS class to a parent target and check it when a certain event such as scroll is used, you don't want bubbles, right?