/**Typeo CSS start**/
* {
box-sizing: border-box;
}
body {
font-family: arial;
margin: 0px;
}
/**Typeo CSS end**/
.lazyload-img-group {
position: relative;
width: 100%;
}
.lazyload-img-group img {
background: #f1f1fa;
width: 400px;
height: 300px;
display: block;
margin: 0px;
border: 0;
max-width: 100%;
}
.lazyloading-img-list {
display: flex;
flex-flow: row wrap;
max-width: 800px;
margin: auto;
width: 100%;
}
.lazyloading-img-list .lazyloading-img-item {
max-width: 50%;
width: 100%;
padding: 10px;
}
window.addEventListener('load', (event) => {
var lazy = document.querySelectorAll('.lazy');
lazy.forEach(function(item, index, arr){
var cssurl = item.getAttribute('data-src');
item.setAttribute("src", cssurl);
});
});
Lazy Loading Images from JavaScript