JSFiddle - React, Tailwind, and code Playground

Lazy load: image fade-in

by tonytlwu

HTML

<button id="btn">Load</button>
<div id="container">

</div>

CSS

.lazy-placeholder {
  opacity: 0;
}

.lazy-loaded {
  transition: opacity 0.2s;
  opacity: 1;
}

JavaScript

$('#btn').on('click', function(){
    $('#container').html('');
    var img = document.createElement('IMG');
    img.classList.add('lazy-placeholder');
    var $img = $(img);
		$img.on('load', function(){
    	var img = this;
    	$('#container').html(img);
      setTimeout(function(){
        img.classList.remove('lazy-placeholder');
        img.classList.add('lazy-loaded');
      }, 0);
    }).attr('src','https://placehold.it/240x240?_='+new Date().getTime());
});