У меня есть вот этот код, который выводит фото с пояснением

Код

<script> function foto(i,t){ var f_p = new Image() f_p.src = "foto/" + i document.pic.src = f_p.src var mes = document.getElementById("foto_txt") mes.innerHTML = t } </script> .... <a href="#" onclick="foto('001.jpg','Описание 1')">1</a> <a href="#" onclick="foto('002.jpg','Описание 2')">2</a> <a href="#" onclick="foto('003.jpg','Описание 3')">3</a> .... <p id="foto_txt" class="txt1"></p> <img src="foto/001.jpg" name="pic" border="1">

Так как фотки всё таки тяжеловаты, то хочется чтобы когда я выбираю новую, исчезала подпись, сама фотка и появлялась надпись "идет загрузка..." и исчезала после того, как фотка загрузится. А то сейчас старая фотка не исчезает пока не загрузится новая, возникает такое ощущение, что функция не сработала.

Как это можно лучше реализовать?

Скрой слой с фоткой по onClick, прицепи к <img> onLoad и по лоаду делай visible.

А сам процесс загрузки, я так понят, отслеживать нельза, т.е. 10% 20% ... 100%

И ещё как мне на месте рисунка выводить надпись о загрузке, ну типа использовать document.img.title - это вообще возможно

ЗЫ
просто не делал такое, а другие можть делали

Это сообщение отредактировал(а) Red Dragon - 11.9.2004, 07:40

посчет %ной загрузки этого сделать нельзя (если картинка нет порезана)
а в случае вроде с картинками если не изменяет память там есть состояния
типа грузится загружен инициализирован правда не уверен

попробуй добавить другую картинку (напиши плизе вайт типа, 2- цветную гиф), и сделай ее дисплай блок
а затем после загрузки основной опятьв ноне ставь
а титле вроде не все браузеры поддерживают, а проще сделай где нить иннер техт с состоянием загрузки

Цитата

посчет %ной загрузки этого сделать нельзя (если картинка нет порезана) а в случае вроде с картинками если не изменяет память там есть состояния типа грузится загружен инициализирован правда не уверен

Да есть такие свойства: complete и readyState
Процентную загрузку сделать не сможешь, лучший выход это анимированный .gif с "видом загрузки"

Что-то перепробывал кучу всего, но так и не получилось

Задача:
- передаётся функции название файла
- функция скрывает предыдущий файл
- пишут, что идёт загрузка
- как только файл полностью загрузился, его показывает

Вот черновой код

Код

function foto(i){ var f_p = new Image() f_p.src = "foto/" + i document.pic.style.display = "none" document.pic.src = f_p.src if (document.pic.complete){document.pic.style.display = "inline"} }

В общем, не понял как работать с complete и readyState

Red Dragon
1.) Могу дать гифку с надписью Loading... (анимированная)
2.) Есть скрипт полосы такой, там все настраивается и, при желании, можно выполнить задачу, которую ты хочешь, кинуть скрипт?

Red Dragon попробуй через каждые промежутки времени проверять не загруженна ли картинка.

Код

var f_p =new Image(); function foto(i){  f_p.src = "foto/" + i;  document.getElementById("pic").src = load_image.src; //пока поставим загрузку  check_foto.tmr = window.setInterval("check_foto()",1000); //каждую секунду проверяем не загрузилась ли } function check_foto() {   if(f_p.complete) {     document.getElementById("pic").src=f_p.src;     window.clearInterval(check_foto.tmr);   } }

Sardar
Вроде пока работает, тока поясни check_foto(), что-то не могу понять complete

Aliance
Кидай GIF`ку, буду проверять код Sardar`а

Red Dragon
GIF`ка тут

Опасно написал, вот правильный код с коментариями:

Код

var loadImage=new Image(); function foto(i) { if(check_foto.tmr!=null) window.clearInterval(check_foto.tmr); //если уже стяла загрузка, то сбросим её LoadImage.src = "foto/" + i; //запрашиваем картинку document.getElementById("pic").src = LoadAnimGif.src; //пока поставим загрузку //если в кеше не лежит, то ставим таймер, каждую секунду будем проверять не згруженна ли картинка check_foto.tmr = window.setInterval("check_foto()",1000); } function check_foto() { //функция вызывается в интервале пока не загрузится картинка  if(LoadImage.complete) { //если картинка загрузилась [true, false]   document.getElementById("pic").src=LoadImage.src; //поажем   window.clearInterval(check_foto.tmr); //и сбросим таймер   check_foto.tmr=null;  } }

Что-то правильный код не хочет работать, картинка как загрузится не меняется
А почему опасный тот код? Вот как он сейчас у меня выглядит

Код

var f_p = new Image(); var load_image = new Image() load_image.src = "foto/loading.gif" function foto(i,t){ document.getElementById("foto_txt").innerHTML = t f_p.src = "foto/" + i; document.getElementById("pic").src = load_image.src check_foto.tmr = window.setInterval("check_foto()",100) } function check_foto(){ if(f_p.complete){  document.getElementById("pic").src=f_p.src;  window.clearInterval(check_foto.tmr); } }

Вот здесь как он работает http://region68.russian.ru "О проекте" --> "Фото"

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

Да, и подходит ли анимGIF`ка к общему виду

Это сообщение отредактировал(а) Red Dragon - 16.9.2004, 08:33

У меня канал 960кбс, так что gif'ку не вижу
В Мозилле не работает, попробуй:

Код

document.getElementById("pic").setAttribute("src",load_image.src);