Show loading gif while image is loading

Question

I made some code where the user can upload some images from a zip. On the next page I need to show all the images seperatly in a 85*85 px frame.

The problem is that

Answer 1

You can set the background of an image to the loading gif. It is a simple css trick. You wouldn't need then to make a js script.

.loading {
  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
}

Update :

In case you have transparent images then the story becames a bit more complicated but, still can be done with css and some div elements.

.image-wrapper {
  overflow: hidden;
  width: 106px;
  height: 106px;
  display: inline-block;
}

.image-wrapper img {
  float: left;
  display: block;
  opacity: 0.2; /* simulating a semitransparent image */
}

.image-wrapper:after, .loading {
  content: ' ';
  background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif')  center no-repeat ;
  background-size : auto 100%;
  width: 106px;
  height: 106px;
  float: left;
  display: block;
}

Unfortunately the browser adds a broken icon or a ? while loading, this is why the image contains an empty alt;

Update 2 :

The second variant relies very much on the image size, if you have difrent sizes than the loading gif won't be pushed away properly, as an alternative would be to use the first variant and a little js script that will remove the background as soon as the image is loaded:

$('img').load(function(){
   $(this).css('background','none');
});

   .loading {
      background: transparent url('http://thinkfuture.com/wp-content/uploads/2013/10/loading_spinner.gif') center no-repeat;
    }