Butona tıklayınca urldeki resmi yükleyip açmak

Merhaba
Butona tıklanınca yazılan urldeki resmin sayfa yüklenmeden açılmasını istiyorum nasıl yaparım?

Giflerde kullanıcam. Bu bir giftir bas ve oynat butonuna tıklanıldığında gif urlden yüklenip kullanıcının karşısına çıkacak.

Normalde show hide ile yapabiliyorum fakat istediğim şey sayfa hızlı açılsın. gifler pat diye yüklenmesin eğer kullanıcı tıklarsa yüklensin.

$("#buton" ).click(function() {
$("#resimid").attr('src',"resimlimki");
});

bunun icin lazyload pluginleri mevcut ama ufaktan mantigini anlatalayim

ornek img tagi su sekilde olmali

<img src="blank.gif" data-src="path/image.png">

daha sonra butona tiklandiginda data-src de path src attr sine yapistirabilirsin
ornek ile aciklamak gerekirse

	<img id="img1"src="https://upload.wikimedia.org/wikipedia/commons/3/38/Blank_space.png" data-src="http://rack.2.mshcdn.com/media/ZgkyMDEzLzA2LzE0L2VmL2JhbmFuYWdpZi5lNzc4ZC5qcGcKcAl0aHVtYgk5NTB4NTM0IwplCWpwZw/e7b7fa27/e8b/banana-gif.jpg">
	<a href="#" id="loadImg1">load img</a>

	<script type="text/javascript">
		$("#loadImg1").click(function(e){
			e.preventDefault();
			var $img1=$("#img1");
			$img1.attr("src",$img1.attr("data-src"));
		})
	</script>

bu en basit hali ama bu temel mantik budur.