JSFiddle - React, Tailwind, and code Playground

Image fade in

by tonytlwu

HTML

<h1><button class="alignright" id="btn">Reload</button> Bibendum Mattis Quam</h1>
<p><span><canvas class="lazy-placeholder" data-src="https://placehold.it/1200x600" width="1200" height="600"></canvas></span></p>
<p><span><canvas class="lazy-placeholder alignright" data-src="https://placehold.it/240x100" width="240" height="100"></canvas></span> Vestibulum id ligula porta felis euismod semper. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. <span><canvas class="lazy-placeholder alignleft" data-src="https://placehold.it/140x80" width="140" height="80"></canvas></span> Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>

CSS

body {
  text-align: justify;  
}

img {
  max-width: 100%;
  height: auto;
}

.lazy-placeholder {
  display: inline-block;
  max-width: 100%;
  height: auto;
}

.alignleft {
  float: left;
  margin: 5px 10px 5px 0;
}

.alignright {
  float: right;
  margin: 5px 0 5px 10px;
}
</style>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

JavaScript

$(function(){
  $('.lazy-placeholder').each(function(){
    var $placeholder = $(this);
    var img = document.createElement('IMG');
    img.style = this.style;
    img.className = this.className;
    img.width = this.width;
    img.height = this.height;
    var $img = $(img);
    $img.on('load', function(){
      $placeholder.replaceWith(this);
      $(this).hide().fadeIn(200);
    }).attr('src', $placeholder.data('src')+'?'+new Date().getTime());
  });
});

$('#btn').on('click', function(){
	location.reload();
});