Часто стал всплывать вопрос: как интерактивно загрузить картинку, при этом показать её только когда она полностью загрузится.

Внимательно рассмотрим задачу, выделим три момента:

• загрузка картинки
• показ когда она загрузилась
• разного рода "заставки"(сообщения "loading..." и т.п.) в момент загруки

Сделаем некий API у картинок, что бы было удобней. Тут сразу упрётся ИЕ рогом, оворя что Image.prototype менять нельзя. Порешаем вторым вызовом проверки:

Код

/** проверяем есть ли требуемый метод у картинки, если надо устанавливаем */ function checkChangeAPIAvaible(img) {   if(!img.changeSrc) img.changeSrc=changeSrcH; } /** реализация метода  changeSrc */ function changeSrcH(src) {   if(src==null) { //если параметров не было, то покажи предидущую удачно загруженную картинку     if(this.backSrc) this.src=this.backSrc;     return;   }   if(this.complete) this.backSrc=this.src; //если предидущая картинка была удачно загруженна, то сохрани адрес на случай возврата   if(!this.tempLoadImage) { //обьект Image который загрузит наш файл      this.tempLoadImage=new Image();      this.tempLoadImage.onload=changeSrcOL; //как только картинка загрузится      this.tempLoadImage.parentImage=this; //ссылка на предка, понадобится в обработчике onload      this.msg=createMessage("Loading...", this); // заморочки, просто сообщение "Loading..."   }   this.msg.show();   this.tempLoadImage.src=src; } /** обработчик события  onload у картинки, меняем пути предка  */ function changeSrcOL() {   this.parentImage.src=this.src;   this.parentImage.msg.hidde();  //скрываем заморочки если использовались =) }

Как видим код предельно прост. Используем например так:

Код

<script type="text/javascript"> function testbut(src) {   var im=document.getElementById("test");   checkChangeAPIAvaible(im); //проверка что changeSrc существует   im.changeSrc(src); //собстна юзаем всё что писали выше } </script> <img id="test" src="test.jpg" /><br /> <button onclick="testbut('test2.jpg');">Вторая</button><button onclick="testbut('nothing.jpg');">Не существующая</button><button onclick="testbut(null);">Предидущая удачная</button>

Само сообщение о загрузке реализовал просто:

Код

<style type="text/css"> .message {   font-family: Verdana;   font-size: 8px;   border: 1px solid black;   background-color: #eff0f9;      position: absolute;   width: auto;   height: auto; } </style> <script type="text/javascript"> function getPosition(obj) {   var x=0, y=0;   while(obj) {     x+=obj.offsetLeft;     y+=obj.offsetTop;     obj=obj.offsetParent;   }   return {x: x, y:y}; } function createMessage(txt, obj) {   var m=document.createElement("DIV"); //создали   m.className="message";   m.innerHTML=txt;   document.body.appendChild(m);   if(m.offsetWidth>obj.width) m.style.width=obj.width; //что бы за картинку не вылезло   return { //возвращаем обьект     target:m,     prnt: obj,     hidde:function(){this.target.style.visibility="hidden";},     show:function(){       var pos=getPosition(this.prnt);       this.target.style.left=pos.x;       this.target.style.top=pos.y;       this.target.style.visibility="visible";     }   }; }</script>

Здесь можно не только увидеть но и покликать: http://files.vingrad.ru/Sardar/ImageLoad.htm

Вау, Avril Lavigne Красивые фотки.

А третия кнопка у меня ничего не делает

Aliance не совсем, эта кнопка устанавливает последнюю удачно загруженную картинку. Жём на первую кнопку, картинка поменялась, жмём на третью, картинка вернулась. Жмём первую, а затем вторую(не существующая), последная удачная теперь картинка от первой кнопки.
Собстна это не нужно, просто реализовал

Цитата(Sardar @ 31.3.2005, 17:31)

Жём на первую кнопку, картинка поменялась, жмём на третью, картинка вернулась.

Вот небыло этого у мен почему-то...))

Я не понял, объясните пожалуйста.

Код

this.tempLoadImage.onload=changeSrcOL; //как только картинка загрузится

Т.е. событию onload этой картинки мы назначаем метод-обработчик смены SCR у родителя, описанный функцией changeSrcOL?

И еще тут не понял, зачем?

Код

this.tempLoadImage.parentImage=this; //ссылка на предка, понадобится в обработчике onload

Как эта ссылка понадобится в onload, ведь в changeSrcOL() "говорится" о ".parentImage"??
А так боле-менее понятно

Код приведённый выше работает с любой картинок на странице. У каждой картинки с которой работаетм мы создаём обьект Image(в коде this.tempLoadImage), который загрузит картинку из сети(кстати таймаут выставить я забыл, вдруг у юзера коннект оборвётся...)

Как только картинка загрузится мы должны показать её юзеру, для этого отлавливаем событие onload.

Цитата

Т.е. событию onload этой картинки мы назначаем метод-обработчик смены SCR у родителя, описанный функцией changeSrcOL?

Да.

Цитата

Как эта ссылка понадобится в onload, ведь в changeSrcOL() "говорится" о ".parentImage"??

Собтна ссылку parentImage мы и устанавливаем в ручную, дабы она потом была доступна из обработчика onload. Ссылка this в обработчике указывает не на элемент img, а на обьект Image, который загружал нашу картинку.


Код по вкусу можно доработать, например опрос текущего статуса(загрузка, отображение).

Просто супер, особенно когда немного понимаешь

Цитата

Код по вкусу можно доработать, например...

отображение - это как. В смысле каким свойством это опрашивается

Sardar, а что вообще бывает и конкретно здесь будет если

Цитата

у юзера коннект оборвётся...

Скрипт браузер подвесит или что?

Я тут разбирался с setInterval и, ненароком, такое сделал !... Называется навреди посетитель своего сайта. Обе бродилки висли напрочь, приходилось перезапускать, сообщения об ошибках в Майкрософт и Геко отправлять...
Не помогло даже предупреждение ИЕ, что данный скрипт тормозит работу.
А что, вот полез посетитиль какие не надо запросы отсылать на сервер, а ты ему: "Нате, отдохните". Да еще, для затравки, вывести типа: "Начинаем форматировать ваш системный диск" . Хотя не хорошо все это.

Цитата

Скрипт браузер подвесит или что?

Нет ничего не будет, в этом и проблема. Юзеру не приятно видеть мессадж "Loading..." не подающий никаких признаков жизни. Если ставим таймаут на 1 минуту, то после этой паузы можно спросить у юзера, мол либо коннект либо сервак упал, попытатся снова или бросить всё

Sardar, вот ты юзаешь свойство complete. А ты учел в своем коде мерзкое отношение Гекоподобных к этому свойству, тестил ли свой код в Мозиле с несуществующими изображениями? Не вижу в скрипте обхода этого глюка.

Цитата(Sardar @ 31.3.2005, 02:04)

if(this.complete) this.backSrc=this.src; //если предидущая картинка была удачно загруженна,

В Геко так нельзя, они черезчур многозадачны и продвинуты (не в ту сторону). Если прописать не существующий адрес не существующей картинки уже complete=true. Вообще при создании объекта a=new Image() в этих браузерах сразу coplete=true. Ну разве, что если присвоить src пустое значение "". С createElement такая же ситуация
Как быть?

Хоть возник такой вопрос, еще раз скажу спасибо за труд и привиденный код, который когда-то сильно продвинул меня в понимании JS (... + позже, тк сегодня уже плюсовал )

Это сообщение отредактировал(а) Иль - 10.5.2005, 15:52

Ребята, если кто будет тестить свойство complete, не забывайте после смены src ставить, например, пустой alert("") (для Геко с кавычками). Это сымитирует задержку интернета, иначе при смене src на src существующего изображения можно поймать старое значение complete (многозадачность - браузер тратит время на заказчу и прорисовку). Даже используя onload такое может быть (хотя с onload только ИЕ может так глюкануть)

Это сообщение отредактировал(а) Иль - 10.5.2005, 15:08

В догонку.
Однако, что получается:
1. С замечательным событием onerror Gecko нам руки пообрубал (лень наверно кому-то реализовывать для людей, как в ИЕ)
2. complete тоже как фикция или заглушка реализован (чую корни проблемы из одного источника с onerror)

И что получается! Надежда только на внимание составителя сайта? За что боролись, на то и напоролись.
У меня, конечно, мало опыта в этом вопросе, поэтому надеюсь, что я ошибаюсь или чего не знаю.

Это сообщение отредактировал(а) Иль - 10.5.2005, 14:40

Цитата

тестил ли свой код в Мозиле с несуществующими изображениями?

Да тестил, свойство работает правильно. Но ты прав, нужно "некоторое время", для того что бы оно обновилось после смены src.

Что ты конкретно делаешь? Открой отдельный топик, выложи код или дай линк на страницу, посмотрим, подумаем.

Добавлю для завершонности темы из другого топика. Sardar заметил, что в Gecko все работает правильно и onerror и complete, но только если работать через сеть, а не тестить локально на своем ПК.

http://files.vingrad.ru/Sardar/ImageLoad.htm - Error 404

ну наверно места нехватает на сервере

Opik
Этот код, если мне не изменяет память, был написал до переезда винграда. Соответственно и файлы все пропали Спасибо, сообщим Сардару :-) А топик перенесу в "Наши скрипты", спасибо, что его подняли. Я его как-то пропустил

Цитата(Opik @ 13.6.2005, 15:19)

http://files.vingrad.ru/Sardar/ImageLoad.htm - Error 404

Цитата

ну наверно места нехватает на сервере

Нет, это Wowa так переезд на новые сервера осуществил, все файлы на форумском FTP теперь убились, увы много 404 по форуму гуляет

Найду/напишу по новой, выложу.

Вот
http://illvin.narod.ru/sardar/ImageLoad/ImageLoad.html
Если Sardar, конечно, не против

Цитата

Если Sardar, конечно, не против

Иль паисб, а то всё времени не было =)
Только по примеру кнопка "Не существующая" должна грузить не существующую картинку

P.S. Содержимое мессаджа в углу без глазных капель под линухом не прочесть...

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

Добавлено:
Ну вот, все исправил

Это сообщение отредактировал(а) Иль - 22.6.2005, 23:36

Ради эксперимента протестил, что быстрее: вариант со сменой ноды на уже готовую ноду по onload или как у Sardar - сменой SRC. Всетаки современные браузеры смену SRC делают чуточку быстрее. На 1000 итераций имеем в среднем в FF 800 на 550, в Mozilla 550 на 350, а в ИЕ 425 на 375мс. Впринципе разница небольшая и если для задач надо, то можно смело использовать DOM вместо SRC

А зачем менять картинку? Естественно будет дольше, новый обьект создаёться, если только в бродилке каких оптимизаций особых нет.

Цитата

то можно смело использовать DOM вместо SRC

Аттрибут src это HTML DOM 1.

Даже и не знаю . Вернее уже не помню. За недостатком опыта считаю, что никогда заранее не знаеш что может понадобится - пусть будет. Задержка минимальна и этот факт радует.