JS: Прогресс загрузки изображения

Дано:Есть массив из картинок.
Нужно: показать их на странице, так, чтобы во время загрузки картинки, если ее еще нет, показывался прогресс загрузки этой картинки вместо пустого места.
Примерно, как делается прогресс загрузки фо флеше самого ролика.
Сделать это надо на javascripte (желательно) или vbscripte/

[RaZEr]

Отобразить процент загрузки изображения не удастся. Максимум что можно сделать, - выяснить загрузилась картинка или нет (img.onload или img.readyState)

Как вариант можешь на фоне нарисовать горизонтальные полосочки с надписями "10%", "20%" и т.д., и изображение по мере своей загрузки будет их закрывать сверху вниз. Или же напиши на фоне "Загрузка ...", а когда загрузится - отобрази (т.е. изначально нужно либо спрятать, либо загрузить в переменную). Если добавить filter-alpha (чтобы плавно появилось), то будет очень даже красиво.

PS: А вообще лучше конечно flash используй, - он создан для интерактива.

[Sheryld]

если на asp.net то там есть такой элемент - progress control, но по возможностям опять же гораздо беднее, чем стандартный аналогичный winform cotrol.

на js(то бишь "на клиенте") где-то встречал реализацию progress bar но вот где, не могу вспомнить. попробуй найти через гугл или на сайтах с каталогами скриптов js.

Да я тоже думаю, что на флеше куда более реальней и красивее.
Но если у меня массив картинок меняется каждый день,
то что каждый раз нужно флешку перекомпилировать.

[RaZEr]

то что каждый раз нужно флешку перекомпилировать

Нет, но это уже в другой раздел

[y.savenkov]

Poprobuite etot script
ne proboval no govoriat rabotaet
<script language="JavaScript" type="text/JavaScript">
<!--

preloader(); //start our function that displays text message

var image0 = new Image();
image0.src = "images/loader.gif" //preload our required image

var image1 = new Image(); //now preload your images in this format
image1.onload = statusBar; // call function when image has loaded to move status bar along
image1.src = "images/your_image.jpg"; //set the source


var image2 = new Image(); //preload your second image same format as above
image2.onload = statusBar;
image2.src = "images/your_image1.jpg";

var image2 = new Image(); //when you get to your last image...
image2.onload = statusBar;
image2.onload = endLoader; //call this function as well -( hides status bar)
image2.src = "images/your_image2.jpg";

var begin = true;
function endLoader(){
begin = false;
if(document.getElementById){ //for new explorer & ns6+
document.getElementById("hider1").style.display='none'; //simply hides status and loader bar
document.getElementById("holder1").innerHTML = "<img src='"+your_images[0]+"' border=\"0\">";
//do whatever you want above here
}else if(document.all&&!document.getElementById){ //for old explorer
document.all.hider1.style.display='none';
document.all.holder1.innerHTML = "<img src='"+your_images[0]+"' border=\"0\">";//do whatever you want here
}

clearTimeout(homer);
return begin;
}

var your_images = new Array("images/loader.gif","images/yourImage.jpg","images/yourImage1.jpg");
//put all your images into an array as well so we can use the var your_images.length later
var the_number = your_images.length-1; //set up a variable for use later

var messages = new Array("Your images are loading","Your images are loading.","Your images are loading..","Your images are loading...","Your images are loading..","Your images are loading.");
//your message array - get above onto one line

var counter = 0;
function preloader(){
if(begin==true)
if(document.getElementById){ //for new explorer & ns6+
document.getElementById("holder").innerHTML = "<font color=\"#ffffff\">"+messages[counter]+"</font>";
}else if(document.all&&!document.getElementById){ //old explorer
document.all.holder.innerHTML = "<font color=\"#ffffff\">"+messages[counter]+"</font>";
} //writes your message array to screen - get above onto one line also
counter++;
if(counter==6){
counter = 0;
}homer = setTimeout("preloader()",200);
}

var totalWidth = 300; //set this to the width in pixels you want your loader bar to go to
var itemWidth = totalWidth/your_images.length;
var itemWidth1 = itemWidth;
var myVar = 0;
function statusBar(){
if(document.getElementById){ //new explorer & ns6+
document.getElementById("loader").style.width =+ itemWidth+"px";
document.getElementById("count").innerHTML = ""+myVar+" of "+your_images.length+"";
} else if(document.all&&!document.getElementById){ //old explorer
document.all.loader.style.width =+ itemWidth+"px";
document.all.count.innerHTML = ""+myVar+" of "+your_images.length+"";
}
itemWidth+=itemWidth1;
myVar++;
}
//-->
</script>

And in the body you'll need a div for the message and loader bar:
<div id="hider1" style="position:absolute; left:126px; top:379px; width:301px; height:16px; z-index:200">
<table width="300">
<tr>
<td width="229" height="10" ><span id="holder" class="info"></span></td>
<td width="59"><span id="count" class="info1"></span></td>
</tr>
<tr>
<td height="10" colspan="2" class="table"><img src="../images/loader.gif" name="loader" width="5" height="10" id="loader"></td>
</tr>
</table>
</div>

And an element to put your pictures:
<span id="holder1" class="info"></span>
And a loader image - you can use this one if you so whish:

Что-то у меня не получилось с наскока запустить твой скрипт.

может пришлешь готовый пример в Html.