Handling Images

Useful links

Deferring Web loaded images

Basics

<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="your-image-here">
copy

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
copy

Using Lazyload.js

HTML

<img class="lazy" alt="..." 
     data-src="../img/44721746JJ_15_a.jpg"
     width="220" height="280">
copy

Javascript

import LazyLoad from "vanilla-lazyload";
var myLazyLoad = new LazyLoad({
    elements_selector: ".lazy"
});
copy