JSFiddle - React, Tailwind, and code Playground

HTML

<img class="loading_image" data-src="http://i.imgur.com/rNS5ph.jpg">

<div class="resources">
  <img class="image_loader" src="http://i.imgur.com/mjnvzim.gif">
</div>

CSS

.resources{
    display: none;
}
.loading_image {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
  /* IE6 & 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
  opacity: 0;
}
/* line 464, ../../app/assets/stylesheets/core.sass */
.loading_image.show {
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100);
  /* IE8 */
  -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF)";
  /* IE6 & 7 */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
  opacity: 1;
  -webkit-transition-property: opacity;
  -moz-transition-property: opacity;
  -ms-transition-property: opacity;
  -o-transition-property: opacity;
  transition-property: opacity;
  -webkit-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -ms-transition-duration: 0.3s;
  -o-transition-duration: 0.3s;
  transition-duration: 0.3s;
}

/* line 468, ../../app/assets/stylesheets/core.sass */
.image_loader {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -6px;
  margin-left: -22px;
  width: 43px;
  height: 11px;
}

JavaScript

window.init_loading_image = function() {
  return $('.loading_image').each(function() {
    var loader, self;
    self = $(this);
    loader = $('.resources .image_loader').clone();
    loader.insertBefore(self);
    self.load(function() {
      self.prev().hide();
      return self.addClass('show');
    });
    return self.attr('src', self.data('src'));
  });
};

$(init_loading_image);