Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Прелоад картинок средствами js! 
:(
    Опции темы
Frantishik
Дата 26.5.2008, 20:44 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 10
Регистрация: 24.12.2007

Репутация: нет
Всего: нет



Люди помогите...... 
 Хочу сделать предзагрузку картинок на js, т.е что б тело сайта не отображалось до тех пор пока все картинки не загружены? 
 вешал на onload функцию  
 function preload(){ 
 if (document.images) 
     { 
       preload_image_object = new Image(); 
       // set image url 
       image_url = new Array(); 
       image_url[0] = "assets/images/adress.gif"; 
       image_url[1] = "assets/images/logo.gif"; 
 ..............................................................   
       var i = 0;
       for(i=0; i<=10; i++) 
         preload_image_object.src = image_url[i];
    }
}

не подгружает...
вешал скрипт в head...то же не помагает

для чего надо?   см.: http://frant.site88.net/
PM MAIL   Вверх
bars80080
Дата 27.5.2008, 09:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


прапор творюет
****
Награды: 1



Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 15
Всего: 315



мож их по массиву загрузить?
Код
function preload(){ 
 if (document.images) 
     { 
       var preload_image_object = new Array(); 
       // set image url 
       image_url = new Array(); 
       image_url[0] = "assets/images/adress.gif"; 
       image_url[1] = "assets/images/logo.gif"; 
 ..............................................................   
       var i = 0;
       for(i=0; i<image_url.length; i++) {
           preload_image_object[i] = new Image();
           preload_image_object[i].src = image_url[i];
       }
    }
}


PM MAIL WWW   Вверх
Ghirik
Дата 27.5.2008, 14:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Где то здесь предлогали использовать динамическое создание объекта Image, примерно такое же название темы было. Т.е. через createElement и appendChild...


--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
Frantishik
Дата 29.5.2008, 13:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 10
Регистрация: 24.12.2007

Репутация: нет
Всего: нет



bars80080, пробовал ....
так как не работает упростил код....

я думаю идея такая,нужно в цикле проверять загруженность картинок. у обьекта image есть свойтсво complete.
вот только при проверке ие ведёт себя непредсказуемо.

нигде не могу найти чёткий пример с кроссбраузеностью...
PM MAIL   Вверх
Ghirik
Дата 29.5.2008, 14:00 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Не подойдет?
Там только код шибко криво форматирован... Ну, меня тогда ещё не научили... smile 


--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
IDVsbruck
Дата 29.5.2008, 14:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



Тут не должно быть проблем с кроссбраузерностью - все в пределах синтаксиса js, а событие onload у image работает давно и везде.
Можно пойти по следующему пути:
1. Грузим флеш, анимашку или просто картинку, типа "страница грузится". Вешаем на ее загрузку onload (для флешки/object тоже подойдет).
2. При вызове обработчика события загрузки запускаем таймер-интервал, к примеру, на 1 секунду и создаем все элементы createElement("img"). На каждый вешаем событие onload.
3. В функции, вызываемой таймером, проверяем (по выбору): а) флаг для каждой картинки; б) количество загруженных картинок.
4. При достижении финала загрузки картинок прекращаем вызов функции по таймеру и отображаем страницу (глобальный div, innerHTML для body, подгрузка AJAXом).
Никаких проблем с разными браузерами быть не должно.
PM MAIL   Вверх
Ghirik
Дата 29.5.2008, 15:13 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



IDVsbruck, и зачем это всё? таймеры и прочее... по моей ссылке, что, предзагрузка не происходит?

Добавлено через 22 секунды
Или не кроссбраузерно?


--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
IDVsbruck
Дата 29.5.2008, 15:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



Не, по твоей не происходит ... сначала вижу текст страницы, а потом начинают появляться картинки (я про ИЕ, т.к. в ФФ отображение идет одновременно).

Вот вопрос:
"Хочу сделать предзагрузку картинок на js, т.е что б тело сайта не отображалось до тех пор пока все картинки не загружены?"

Ответ:
Надо сначала все загрузить, а потом все отобразить. Я предложил свой вариант.
PM MAIL   Вверх
Ghirik
Дата 29.5.2008, 15:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Дак, это разве проблема? Сложность как раз в контроле загрузки картинок, а показать и скрыть body, даже я смогу.


--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
Frantishik
Дата 29.5.2008, 18:25 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 10
Регистрация: 24.12.2007

Репутация: нет
Всего: нет



вот и я про это.....
нужно выловить событие когда загрузка картинки завершенна....
PM MAIL   Вверх
Ghirik
Дата 29.5.2008, 18:34 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Цитата

нужно выловить событие когда загрузка картинки завершенна.... 



Frantishik, Вы скрипт смотрели? Там же всё ловится, во всех браузерах... показ картинок начинается только после полной загрузки всех.

Добавлено @ 18:41
Вот всё что вам нужно.

Код

var r=10;    //Номер старшей картинки, нумерация начинается с 0.jpg, по умолчанию папка с картинками - img
var a_i = [];
for (var c = 0; c <= r; c++) {
    a_i[c] = new Image();
    a_i[c].src = 'img/' + c + '.jpg';
}


И bars80080 об этом же говорил... Вы пробовали?




Это сообщение отредактировал(а) Ghirik - 29.5.2008, 18:44


--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
Frantishik
Дата 29.5.2008, 18:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 10
Регистрация: 24.12.2007

Репутация: нет
Всего: нет



Ghirik, 
дело в том что просто при создании объекта картинка не грузится, 
Код

var r=10;    //Номер старшей картинки, нумерация начинается с 0.jpg, по умолчанию папка с картинками - img
var a_i = new Object();
for (c = 0; c <= r; c++) {
    a_i[c] = new Image();
    a_i[c].src = 'img/' + c + '.jpg';
}

Зесь по сути то же самое что и у меня, только создаётся обьект Image....
Цитата

пробовал ....
так как не работает упростил код....

PM MAIL   Вверх
Ghirik
Дата 29.5.2008, 19:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Цитата

Зесь по сути то же самое что и у меня, только создаётся обьект Image....


Ну... Ни чего себе! то же самое.... smile 
Если Вы говорите про это:
Код

function preload(){ 
 if (document.images) 
     { 
       preload_image_object = new Image(); 
       // set image url 
       image_url = new Array(); 
       image_url[0] = "assets/images/adress.gif"; 
       image_url[1] = "assets/images/logo.gif"; 
 ..............................................................   
       var i = 0;
       for(i=0; i<=10; i++) 
         preload_image_object.src = image_url[i];
    }
}


То это, конечно, не будет работать... буквы не правильные...




--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
SelenIT
Дата 29.5.2008, 19:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


баг форума
****


Профиль
Группа: Завсегдатай
Сообщений: 3996
Регистрация: 17.10.2006
Где: Pale Blue Dot

Репутация: 49
Всего: 401



Frantishik, у Вас создается один объект Image. И вы говорите ему буквально следующее:
Цитата

А загрузи-ка мне картинку "assets/images/adress.gif"! Нет, забудь, загрузи "assets/images/logo.gif", да поживее! Нет, logo уже не нужно, быстро грузи следующую картинку... (и так 10 раз)

А в коде Ghirikа свой объект Image создается для каждой картинки, которую нужно загрузить - и, если не произойдет ничего непредвиденного, дожидается ее загрузки.

А на случай непредвиденности нужно предусмотреть таймер, чтобы, если картинка не загрузилась, скажем, через 15 сек. - отобразить вместо нее див с извинительным текстом. А то при такой постановке задачи одна недогрузившаяся картинка намертво заблокирует всю страницу...


--------------------
Осторожно! Данный юзер и его посты содержат ДГМО! Противопоказано лицам с предрасположенностью к зонеризму!
PM MAIL   Вверх
Ghirik
Дата 29.5.2008, 19:14 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Цитата

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


Точно, я как то об этом не думал.... Опыту нету, однако....


--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
Страницы: (3) Все [1] 2 3 
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.1401 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.