How?

Well, you can choose to start loading after the onClick event occurs.

You can add an image to the DOM on a click event using jQuery in a few ways, here is one way:

$('#button').click(function() {
   $('#element-to-add-image-to').append('<img class="newImage" src="img/image.jpg" alt="Image description" />');
});

The image isn't on the page until you add it and so it won't load until then.

And you can remove it from the DOM like so:

$('#button').click(function() {
   $('.newImage').remove();
});

Yep, try it out and see! You can append any HTML element you like.

Is the rel attribute valid for <button>? If so, maybe this can be used for load more than one image: http://jsfiddle.net/tovic/x3QdU/ »

<button rel="http://2.bp.blogspot.com/-MUcNEVzLIB8/TrStjvP92kI/AAAAAAAABLI/eK3vb1QMrrw/s1600/slide1-new.png&quot; >Click!</button>
<button rel="http://1.bp.blogspot.com/-KDiH65CZ8Hs/TjO9rQbmt9I/AAAAAAAAAfg/HeVV38ckUzk/s1600/3.jpg&quot; >Click!</button>
<button rel="http://4.bp.blogspot.com/-pZuNX8uqQhw/TjO9rDvyC8I/AAAAAAAAAfY/N91storzGWc/s1600/2.jpg&quot; >Click!</button>
<button rel="http://4.bp.blogspot.com/-y1cPqvkIts8/TjPDKH1-XDI/AAAAAAAAAgA/l8JbwyqcQvI/s1600/hompimenu.jpg&quot; >Click!</button>

<div id="area"></div>

$(document).ready(function(){
    $("button").click(function(){
        var imgUrl = $(this).attr('rel');
        $("#area").html("<img src='" + imgUrl + "' alt='description' />");
    });
});

Oh, sorry. rel not valid for <button>
I mean: the rel values

@Mottie: Wow. I think I'll learn a lot about html5 :(o)
But, actually this is can be modified. No longer use the <button>, but using <a>. Then add return false; at the end function:

$(document).ready(function(){
    $("a").click(function(){
        var imgUrl = $(this).attr('href');
        $("#area").html("<img src='" + imgUrl + "' alt='description' />");
	 return false;
    });
});