JSFiddle - React, Tailwind, and code Playground

by Louis Walch

HTML

<div class="wrapper">

<div class="cells">
    
    <div class="cell cell_large"><img class="background" orig-width="1170" orig-height="1000" data-v_align="left" src="http://placekitten.com/1170/1000"/></div>
    <div class="cell cell_large"><img class="background" orig-width="1170" orig-height="1000" src="http://placekitten.com/1170/1000"/></div>
    
    <div class="cell cell_small"><img class="background" orig-width="295" orig-height="295" src="//static.ralphlauren.vsadev.com/assets/img/hp_paintcan.png" data-h_align="bottom" /></div>
    <div class="cell cell_small"><img class="background" orig-width="295" orig-height="295" src="//static.ralphlauren.vsadev.com/assets/img/hp_paintcan.png" data-h_align="center" /></div>

    <div class="cell cell_wide"><img class="background" orig-width="1170" orig-height="1000" src="http://placekitten.com/1170/1000"/></div>  
    
</div>
    
</div>

CSS

HTML,BODY {
    height: 100%;
    margin: 0;
    padding: 0;
    }

.wrapper {
    margin-left: 100px;
    height: 100%;
    }

.cells {
    background-color: #ccc;
    width: 100%;
    height: 100%;
    position: relative;    
    }

    .cell {
        float: left;
        position: relative;
        overflow: hidden;
        }

    .cell:nth-child(2) { background-color: red; }
    .cell:nth-child(3) { background-color: blue; }
    .cell:nth-child(4) { background-color: green; }
    .cell:nth-child(5) { background-color: yellow; }

    .cell_large {
        height: 60%;
        width: 50%;        
        }
    .cell_small {
        height: 40%;
        width: 25%;        
        }
    .cell_wide {
        height: 40%;
        width: 50%;        
        }

    .cell .background {
        position: absolute;     
        display: none;
        }

JavaScript

var RLP = RLP || {};

RLP.Utils = new function() {

	this.preload = function(images, options) {
	
		var onComplete;
		var onEach;
		var imageAttr = options.attr || 'src';
		
		if (options && (typeof options =='object')) {
			onComplete 	= options.onComplete || jQuery.noop();
			onEach 		= options.onEach || jQuery.noop();
		} else {
			// Support for old preload method which only had onComplete
			onComplete 	= options || jQuery.noop();
		}
		
	
		// Call this non-linearly
		setTimeout(function() {

			var total			= images.length;			
			var loaded_count	= 0;
			var loaded_src 		= [];
			
			var done	= function(img) {

				loaded_count++;
				
				// Callback for each image being loaded
				if ($.isFunction(onEach)) onEach(img);  
				
				// Callback for entire set of images being loaded
				if (loaded_count === total) {
					if ($.isFunction(onComplete)) onComplete(images);
				}			
			};
			
			if (images.length) {

				images.each(function(index) {
					
					var img = $(this);
					var src = img.attr(imageAttr);
					
					// No source found, let's just fire done event
					if (!src.length) done(img);
					
					// Make sure we have not already loaded this image
					if (jQuery.inArray(src, loaded_src) > 0) done(img);
					
					// Create new image object, this gets around problems with browser cache
					var load_img = new Image();
					$(load_img).bind('load error', function(e) {
						done(img, load_img);
						$.data(this, 'loaded', ('error'==e.type)?false:true);
					});
					$(load_img).attr('src', src);

				});
	
			} else {
				
				// No images to load, let's get outta here
				if ($.isFunction(onComplete)) onComplete(images); 		
	
			}
		
		}, 0);
	};
    
    
};


$(document).ready(function() {
    
    /*
    data-v_align : top, center, bottom    
    data-h_align : left, center, right 
    */
    
    var images         = $('.background');
    var fade_delay     = 150;
    var loaded         = false;
    var resize_timer   = null;
    
    var...