Форум программистов [Powered by Invision Power Board]

Версия для печати темы
Нажмите сюда для просмотра этой темы в оригинальном формате

Форум программистов > JavaScript: Общие вопросы > Узнать загружена ли картинка

Автор: Master 8.12.2004, 12:18

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

Нак вот, можно ли отследить с помощью js загрузку всех картинок на сайте и только потом выдать это все на обозрение? если да, то у кого какое мнение на этот счет?

thxxxx

Автор: GoodBoy 8.12.2004, 12:26

Тогда, мне кажется, лучше сделать прелоад всех изображений, а потом сразу все их показать...

Автор: Sardar 8.12.2004, 12:31

Посмотри здесь: http://forum.vingrad.ru/index.php?showtopic=30900
У всех элементов есть свойство readyState в ИЕ, у картинок есть свойство complete - во всех браузерах.

Автор: Се ля ви 8.12.2004, 13:21

Впринципе, мне кажется, есть более простой вариант - можно всё скрыть, а на событии onload всё показать :-)

Например так:

Код


<body style="display: none;" onload="this.style.display = 'block';">

Единственное, если у тебя много счётчиов, то браузер будет ждать загрузки их всех и это будет долго. Тогда лучше отслеживать через complete.

Автор: Gold Dragon 8.12.2004, 13:27

Как вариант.

Есть такой классный параметр <lowsrc> у <img>, который может помочь. Смысл такой, в <lowsrc> цепляешь картинку очень плохинькую и очень лёгкую, а когда загрузится основная картинка, она сразу поменяется..

Автор: Alx 8.12.2004, 13:48

Red Dragon
это по-моему не ИЕ...

Автор: Gold Dragon 8.12.2004, 14:46

ALEXANDRO
Я знаю что в спецификации HTML4 нет, но работает, только не помню где

Автор: Sardar 8.12.2004, 15:55

Red Dragon если работает не везде, то смысла использовать нет.
Можно как вариант придумать такую фичу самому, указать картинке src на маленький файл, пусть сразу грузится. Одновременно в скрипте создаются картинки с конечными изображениями. Как только картинка загрузится, она заменяет показанную ранее с низким разрешением.

Автор: Alx 8.12.2004, 17:13

Sardar
ой, да ну - это ненужный изврат! лучше уж так сделать:

Код


<style>
img {visibility:hidden;}
</style>
<script>
preloader();
function preloader()
{if (document.readyState == "complete")
{for (var i=0;i<document.images.length;i++)
{document.images[i].style.visibility = "visible";
}
}
else
setTimeout ("preloader()", 500);
}
</script>
<body>
<img src="1.jpg"></img>
</body>

Автор: Sardar 8.12.2004, 17:42

ALEXANDRO но у тебя не показываются картинки пока не загрузятся, разве это хорошо? smile

Код

  preloader.images=[];
function preloader() {
  var imgs=document.getElementsByTagName("IMG");
  preloader.images.length=imgs.length;

  for(var i=0; i<imgs.length; i++) {
    if(!imgs[i].getAttribute("main_image")) continue;
    preloader.images[i]={img: new Image(), prnt: imgs[i]};
    preloader.images[i]img.src=!imgs[i].getAttribute("main_image");
  }
  //поставили на загрузку, проверяем каждую секунду не загрузились ли картинки
  window.setInterval(checkImagesLoaded, 1000);
}
function checkImagesLoaded() {
  for(var i=0; i<preloader.images.length; i++) {
    if(preloader.images[i].img.complete) {
       preloader.images[i].prnt.src=preloader.images[i].img.src;
       preloader.images.splice(i, 1); //удаляем элемент из массива
    }
  }
}

Вот код на скорую руку, не тестил, т.к. на работе под строгим взглядом босса... smile

Под ИЕ5.0 будет ошибка, не существует функции splice у кастрированного массива. Здесь постил реализацию всех необходимых функций для массивов, в поиск с ключь. словом splice smile

Юазем так:

HTML

<body onLoad="preloader()">
<img src="./images/small/быстро_загружаемая_картинка.jpg" main_image="./images/долго_загружаемая_картинка.jpg">
......

Автор: Aliance 8.12.2004, 20:19

document.images можно юзать (IE only)

Можно еще прогрес бар сделать, отобр. загрузку изобр. с кеша... код есть (реализация тут: http://aliance.hoha.ru/gallery.html )

Автор: Gold Dragon 8.12.2004, 21:00

Народ, я уже что-то подобное спрашивал, только найти не могу и код там рабочий, реализован на region68.russian.ru (раздел "о проекте"-"фото")