Узнать загружена ли картинка

 
0
 
JavaScript
ava
Master | 08.12.2004, 12:18
Есть сайт, очень тяжелый. Грузится долго, но таково было желание заказщика.
Так вот, теперь ему не нравица что сайт грузится кусками, т.е графика естественно порезана и загружается все по частям.

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

thxxxx
Kommentare (11)
ava
GoodBoy | 08.12.2004, 12:26 #
Тогда, мне кажется, лучше сделать прелоад всех изображений, а потом сразу все их показать...
ava
Sardar | 08.12.2004, 12:31 #
Посмотри здесь: http://forum.vingrad.ru/index.php?showtopic=30900
У всех элементов есть свойство readyState в ИЕ, у картинок есть свойство complete - во всех браузерах.
ava
Се ля ви | 08.12.2004, 13:21 #
Впринципе, мне кажется, есть более простой вариант - можно всё скрыть, а на событии onload всё показать :-)

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

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


Единственное, если у тебя много счётчиов, то браузер будет ждать загрузки их всех и это будет долго. Тогда лучше отслеживать через complete.
ava
Gold Dragon | 08.12.2004, 13:27 #
Как вариант.

Есть такой классный параметр <lowsrc> у <img>, который может помочь. Смысл такой, в <lowsrc> цепляешь картинку очень плохинькую и очень лёгкую, а когда загрузится основная картинка, она сразу поменяется..
ava
Alx | 08.12.2004, 13:48 #
Red Dragon
это по-моему не ИЕ...
ava
Gold Dragon | 08.12.2004, 14:46 #
ALEXANDRO
Я знаю что в спецификации HTML4 нет, но работает, только не помню где
ava
Sardar | 08.12.2004, 15:55 #
Red Dragon если работает не везде, то смысла использовать нет.
Можно как вариант придумать такую фичу самому, указать картинке src на маленький файл, пусть сразу грузится. Одновременно в скрипте создаются картинки с конечными изображениями. Как только картинка загрузится, она заменяет показанную ранее с низким разрешением.
ava
Alx | 08.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>
ava
Sardar | 08.12.2004, 17:42 #
ALEXANDRO но у тебя не показываются картинки пока не загрузятся, разве это хорошо? ;-)
  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 ;-)

Юазем так:
HTML
<body onLoad="preloader()"><!-- А еще лучше поставитьэто в конец страницы -->
<img src="./images/small/быстро_загружаемая_картинка.jpg" main_image="./images/долго_загружаемая_картинка.jpg">
......
ava
Aliance | 08.12.2004, 20:19 #
document.images можно юзать (IE only)

Можно еще прогрес бар сделать, отобр. загрузку изобр. с кеша... код есть (реализация тут: http://aliance.hoha.ru/gallery.html )
ava
Gold Dragon | 08.12.2004, 21:00 #
Народ, я уже что-то подобное спрашивал, только найти не могу и код там рабочий, реализован на region68.russian.ru (раздел "о проекте"-"фото")
Registrieren Sie sich oder melden Sie sich an, um schreiben zu können.
Unternehmen des Tages
Вы также можете добавить свою фирму в каталог IT-фирм, и публиковать статьи, новости, вакансии и другую информацию от имени фирмы.
Подробнее
Mitwirkende
advanced
Absenden