JSFiddle - React, Tailwind, and code Playground

by Shirly Manor

HTML

<script src="https://code.jquery.com/jquery-2.1.3.min.js"></script>

<div class="placeholder" data-large="http://res.cloudinary.com/demo/image/upload/sample">
  <img src="http://res.cloudinary.com/demo/image/upload/w_100/w_iw/sample" class="img-small">
  <div style="padding-bottom: 66.6%;"></div>
</div>

CSS

.placeholder {
  background-color: #f6f6f6;
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.placeholder img {
  position: absolute;
  opacity: 0;
  top: 0;
  left: 0;
  width: 100%;
  transition: opacity 1s linear;
}

.placeholder img.loaded {
  opacity: 1;
}

.img-small {
  filter: blur(50px);
  /* this is needed so Safari keeps sharp edges */
  transform: scale(1);
}

JavaScript

$(function(){
			console.log("placeholder,small");  
  var placeholder = document.querySelector('.placeholder'),
      small = placeholder.querySelector('.img-small')
			
			console.log(placeholder,small);
  
  // 1: load small image and show it
  var img = new Image();
  img.src = small.src;
  img.onload = function () {
   small.classList.add('loaded');
  };
  
  // 2: load large image
  var imgLarge = new Image();
  imgLarge.src = placeholder.dataset.large; 
  imgLarge.onload = function () {
    imgLarge.classList.add('loaded');
  };
  placeholder.appendChild(imgLarge);
});