Simple Fast Image Loading with Javascript

Javascript hack to load a big sized image in background with a blurred small size image preview. https://youtu.be/AMteSxT5uGM

by Gustavo Carvalho

HTML

<img class="blur" src="https://gustavo-images.s3.amazonaws.com/jsfiddle/smallimg.jpg" width="1200" />

CSS

.blur {
  filter: blur(10px);
  transition: all 1s;
}

.noblur {
  transition: all 2s;
}

JavaScript

var image = document.images[0];
var bigImage = document.createElement("img");

bigImage.onload = function() {
  image.src = this.src;
  image.className = "noblur";
};

setTimeout(function() {
  bigImage.src = "https://gustavo-images.s3.amazonaws.com/jsfiddle/bigimg.jpg";
}, 50);