Lazy Loading functionality for multiple images

[mwernimont]

Currently, in the implementation I have chosen we first load a tiny placeholder image and when the image can be seen in the viewport the image src is swapped with the image from the data-src element and we get our real intended image loaded onto the screen.

In my thinking, one of three things needs to happen.

1. Somehow get the ability to load only one placeholder image file, but be able to use it for multiple images that way we can give each image it's own unique data-src URL to the actual image we need to swap in.
   So like this
   <img class="lazy" src="images/placeHolder.gif" data-src="images/image1.jpg"/>
<img class="lazy" src="images/placeHolder.gif" data-src="images/image2.jpg"/>
<img class="lazy" src="images/placeHolder.gif" data-src="images/image3.jpg"/>

2. Get Vizlab to not make the location the src of the image so we can have images load in like
   <img class="lazy" data-src="images/image.jpg"/>
   and when the image gets to the viewport we have the JS create the src using the data-src and remove the data-src from the image.
   <img class="lazy" src="images/image.jpg"/>

3. Stop creating the entire image tag inside the yaml and do some kinda hardcoding like this in the template itself.

<img class="{{lazy}}" src="{{placeHolder}}" data-src ="{{image1}}"/>

The variables lazy, placeHolder, image1 would still be created in the yaml and be able to be used anywhere.

That way we could just swap in and out what file paths to what images we need to switch out and not make possibly messy changes in how the yaml works.

Maybe one or all of these are already possible, so let me know if they are.