JSFiddle - React, Tailwind, and code Playground

by denniswaltermartinez

HTML

<img id="myimg" src="https://www.google.com/logos/doodles/2013/erwin_schrdingers_126th_birthday-2002007-hp.jpg" alt="">

JavaScript

// https://gist.github.com/paulirish/268257

$.fn.imagesLoaded = function (callback) {
	var elems = this.filter('img'),
		len = elems.length,

	// data uri bypasses webkit log warning (thx doug jones (cjboco))
	blank = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";

	elems.bind('load', function () {
		// check image src to prevent firing twice (thx doug jones (cjboco))
		if (--len <= 0 && this.src !== blank) {
			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
			this.src = blank;
			this.src = src;
		}
	});
};

alert('testing before image loads!');

$('#myimg').imagesLoaded(function (e) {

	var img = $(e),
		dimension = {
			width: img.outerWidth(),
			height: img.outerHeight()
		};

	// do whatever you need to do here.
	alert(dimension.width + ' - ' + dimension.height);
});