Fade in images after they have loaded

Question

I found this code to achieve the desired effect and tried it on JSFiddle

http://jsfiddle.net/AndyMP/7F9tY/366/

It seems to work in that it fades the image in

Answer 1

Pure java script and CSS solution:

Using the transitions effect with opactiy.

const images = document.getElementsByTagName("img");
for (let image of images) {
  image.addEventListener("load", fadeImg);
  image.style.opacity = "0";
}

function fadeImg () {
  this.style.transition = "opacity 2s";
  this.style.opacity = "1";
}