// это картинка, показывающая загрузку.
var loader=new Image();
loader.src="http://www.toidesign.co.nz/images/ajax-loader.gif";
// при клике на кнопку....
document.getElementsByTagName('button')[0].onclick = function(){
// заменяем кнопку
document.body.replaceChild(loader,this);
// ставим на загрузку большую картинку
var a = new Image(200,200);
// я убрал кеширование, чтобы крутилка была заметной.
a.src="http://cs9591.vkontakte.ru/u00001/136592355/z_17426819.jpg?"+Date.now();
a.onload = function(){
// когда она загрузится, заменям крутилку этой картинкой.
document.body.replaceChild(a,loader);
};
}
пример
<button>загрузить картинку</button>
<script>
var loader=new Image();
loader.src="http://www.toidesign.co.nz/images/ajax-loader.gif";
document.getElementsByTagName('button')[0].onclick = function(){
document.body.replaceChild(loader,this);
var a = new Image(200,200);
a.src="http://cs9591.vkontakte.ru/u00001/136592355/z_17426819.jpg?"+Date.now();
a.onload = function(){
document.body.replaceChild(a,loader);
};
}
</script>