JSFiddle - React, Tailwind, and code Playground

by darcyclarke

HTML

<img src="http://t3.gstatic.com/images?q=tbn:ANd9GcT9QsU5tqswAfs_dN-_nwFHAnRGh62ytgUT2eaIz0p-2zyoGRh1FQ&t=1">

<img src="http://www.flash-slideshow-maker.com/images/help_clip_image020.jpg">

<img src="http://www.flash-slideshow-maker.com/images/help_clip_image004.jpg">

<img src="http://www.images-photography-pictures.net/jennifer-lopez-picture-SiRi.jpg">

<img src="http://www.nasa.gov/images/content/54350main_MM_image_feature_101_jw4.jpg">

<img src="http://www.oxfordreference.com/media/images/9346_0.jpg">

<img src="http://dev.opera.com/articles/view/17-images-in-html/images-figure1.jpg">

<img src="http://www.web-album-maker.com/images/add_images.jpg">

CSS

img {
   opacity: 0; 
}

.ie {
 opacity: 1;   
}

JavaScript

$.fn.imagesLoaded = function(callback){
  var elems = this.filter('img'),
      len   = elems.length;
      
  elems.bind('load',function(){
      if (--len <= 0){ callback.call(elems,this); }
  }).each(function(){
     // cached images don't fire load sometimes, so we reset src.
     if (this.complete || this.complete === undefined){
        var src = this.src;
        // webkit hack from http://groups.google.com/group/jquery-dev/browse_thread/thread/eee6ab7b2da50e1f
        // data uri bypasses webkit log warning (thx doug jones)
        this.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        this.src = src;
     }  
  }); 

  return this;
};

jQuery(function($){
    
    $("img").each(function(){
        $(this).imagesLoaded(function(){
           $(this).animate({opacity:1},500); 
        });
    });
       
});