Sometimes you have to load dynamic images as a result of a AJAX request, and you want to be able to do things only after the image has finish loading. In this case the ready() function, which is a wrapper for the window.onload() function is not usefull, because it applies to the elements present at the beginning.

In this scenario you make a request and receive as a string a path for a new image you have to load. This is usefull if you have big images and want to wait until the images are loaded before doing anything else.


$(document).ready( function (){
$.get(
'test.php',
function( data ){
//console.log(data); // ["test.jpg"]
var _image = new Image();
_image.src = data;
_image.id = 'newImageId';
$(_image).load( function(){
//once image is loaded add it to the div and remove the preloading
$("#imageContainer").append( _image ).removeClass('loading');
// do other stuff
_image.alt = "test image";
});
}
);
});


I’ve tested it in IE, FF, Chrome and works with cache enabled/disabled. The secret, not a big one, is the usage of AJAX load() function which does a GET request in the background and allows a callback. The purpose of the load function is to inject some html code in the current page. If you want to change the src value for a current image and do a callback it will be a good idea to pass a random string to the GET request as your browser could cache the image name and content.

Demo here

Fact: you don’t have to use plugins for everything.

Working on a custom javaScript intensive CMS I get the task of displaying a big image inside a controlled environment. I could have used a plugin like MbImgNavigator or ImageZoom. I implemented both but I wasn’t particularly satisfied with neither.

So I created my own simulation that is just a couple of lines without even the need for something complex.
What it does:

• checking if the image is bigger than then the restrictive container
• modifies a envelope container to allow movement only between the calculated permitted limits
• activates the drag (jQueryUI) by globally or by axis if only one of the dimensions is overlapping the limits

If the image is smaller that the limits nothing happens.

$(document).ready( function (){
var overflow_x = 0;
var overflow_y = 0;
var _image_x = $('#imageTest').width();
var _image_y = $('#imageTest').height();
if( _image_x > 300 ){
overflow_x = _image_x;
}
if( _image_y > 300 ){
overflow_y = _image_y;
}
if( overflow_x && overflow_y ){
$('#bckContainerImg').css(
{
height: (overflow_y * 2 - 300),
width: ( overflow_x * 2 - 300 ),
'margin-top' : -( overflow_y - 300),
'margin-left': -( overflow_x - 300)
}
);
$("#bigImg img").draggable({containment: '#bckContainerImg'}).css({ cursor: 'all-scroll'});
} else{
if( overflow_x ){
$('#bckContainerImg').css({width: ( overflow_x*2 -300 ), 'margin-left': -(overflow_x - 300) });
$("#bigImg img").draggable({ axis: 'x', containment: '#bckContainerImg' }).css({ cursor: 'e-resize'});
}
if( overflow_y ){
$('#bckContainerImg').css({ height: (overflow_y * 2 - 300), 'margin-top': -(overflow_y - 300),});
$("#bigImg img").draggable({ axis: 'y', containment: '#bckContainerImg' }).css({ cursor: 'n-resize'});
}
}
});


You can see a full demo here.