owLazyLoad
Lazyload images, iframes, videos and even background images for the desired DOM elements.
Why this?
Lazyloading content has no mistery and there are lots of libraries that get the job done, but I just wanted to keep it simple, light and pure.
I use vanilla Javascript and the minified version size is only 703 bytes.
However, there is no scroll/viewport checking or any other feature rather than loading your desired content at x millisecs after the DOM is ready. The code is easy to read and understand and you should have no problems to extend it to fit your particular needs.
Get started
Just include the JS in your project.
No need to initialise it, but if you need to, for example to get it initialised after an Ajax request, use:
owLazyLoad();
With Images Use the attribute ow-lazyload-src with the path to the image.
<img src="loading.gif" ow-lazyload-src="photo-1489069313310-63735a4f3010.jpeg" height="320" />
With Background images
With DIV,SECTION,SPAN or other nodes with no 'src' attribute, the image
will be loaded as a background-image.
Again, use the attribute
ow-lazyload-src with the path to the image.
<div ow-lazyload-src="photo-1489069313310-63735a4f3010.jpeg" style="width:100%;height:400px;background-size:cover;background-repeat:no-repeat;"></div>
With Audio/Iframes/Videos Use the attribute ow-lazyload-src with the path to the desired content.
<video controls ow-lazyload-src="https://www.w3schools.com/html/mov_bbb.mp4" width="100%" height="400"></iframe>
<iframe ow-lazyload-src="https://www.olabaworks.com" width="100%" height="400"></iframe>
All the examples together
<img ow-lazyload-src="photo-1489069313310-63735a4f3010.jpeg" height="320" />
<div ow-lazyload-src="photo-1489069313310-63735a4f3010.jpeg" style="width:100%;height:400px;background-size:cover;background-repeat:no-repeat;"></div>
<iframe ow-lazyload-src="https://www.olabaworks.com" width="100%" height="400"></iframe>
<video controls ow-lazyload-src="https://www.w3schools.com/html/mov_bbb.mp4" width="100%" height="400"></iframe>
Image credits go to @eaterscollective at unsplash.com
Video credits go to https://www.bigbuckbunny.org/