JSFiddle - React, Tailwind, and code Playground
HTML
<div id="foo" style="border: 5px solid black; padding: 10px;"></div>
JavaScript
(function($) {
var _offscreen = $('<div></div>')
.css({position:'absolute',left:'-9999999px'})
.appendTo($('body'));
$.fn.loadImage = function(url, callback) {
this.attr('src', url)
.load(function() {
var $this = $(this);
if ($this.parent().size() == 0) {
$this.appendTo(_offscreen);
}
setTimeout(function() {
if (typeof callback == 'function') {
callback.apply($this[0]);
// remove if still present in the _offscreen element only
if ($.contains(_offscreen[0], $this[0])) {
$this.remove();
}
}
}, 0);
});
};
})(jQuery);
$('<img></img>').loadImage("http://l1.yimg.com/a/i/ww/news/2011/03/25/zo.jpg", function() {
alert("Image loaded: " + this.src + "\n"
+ " (" + $(this).width() + "x" + $(this).height() + ")");
$(this).appendTo($('#foo'));
});