Загрузка изображения

[shilinpavel]

Подскажите как сделать так чтобы во время загрузки изображения на его месте была анимация загрузки, и только после того как изображение полностью загрузиться, оно появиться.

[Sweet]

С помощью события .onload

[shilinpavel]

А если я подгружаю картинку через JavaScript

document.getElementById('head').innerHTML = '<img src="../php_script/gall/123.gif" />';

[shilinpavel]

Или это невозможно?

[melky]

// это картинка, показывающая загрузку.
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>

[Genius]

Это всё не так сложно. А вот как сделать, чтоб во время загрузки ещё и график с процентами загрузки отображался?

Это потруднее, если вообще возможно.

[melky]

это возможно в современных браузерах. это уже ajax, и это уже один домен.