Coder Wrap provides free to use snippets Coder Wrap provides free to use snippets

Back to Images Effects
Preview Source Code
Download
HTML
CSS
/**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;
}
JS
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);
  });
});

Related Snippets

Leave a comment

Your email address will not be published. Required fields are marked *