Меню
Что нового?

Прелоад GIF-анимации

Avenus

Under Glory Yield
C событием onload разобрался :)
С flash ясное дело, надо отдельно разбираться... про него много плохого только знаю, а пользоваться особо не умею.
И еще, подсчитал точно: получается всего 3 мб. Но в данном случае трафик не является критерием для оптимизации...
Помучаю еще скрипт, если ничего хорошего не получится, то буду с flash разбираться... ;)
Спасибо за помощь!
 

vovanium

Новичок
И еще такой вопрос, если чел посмотрел картинку, нажал другую кнопку, просмотренная картинка скрывается или остается?
 

Avenus

Under Glory Yield
Не совсем так...
К примеру, различные GIF с 1-м циклом (s) и бесконечным (n).
Нажимая на картинку (n), она скрывается и показывается картинка (s)... после истечения времени анимации (s) показывается снова (n).

-~{}~ 02.05.09 01:11:

Некоторые картинки срабатывают также, но только при наведении на них, а не клике. В общем, такая забавная страничка получается... развлекательная :)
 

vovanium

Новичок
ты не понял, эти твои картинка s и n показываются на одном месте страницы или в разных, т.е. могут ли одновременно показываться несколько картинок?
 

Avenus

Under Glory Yield
vovanium, а ... да, конечно... показываются в разных местах сразу несколько картинок (n). При onclick на любую из них показывается на ее месте соответственно для нее другая анимация (s). Если на одну нажал, а потом на другую, то для первой скрывается анимация (s) и снова показывается (n).

-~{}~ 02.05.09 01:33:

Еще, важное... во время загрузки страницы... показывается только та анимация (n), для которой уже загрузилась анимация (s). Вот, в принципе для чего предлоадер.
А прогресс бар, так для красоты и доп. информативности :)

-~{}~ 02.05.09 01:39:

Вот, собственно, почему я зациклился на complete.
Т.к.
PHP: 
img[i].onload=function(){
/* показать картинку с id из массива с ключом i
не получается...  */
}
 

vovanium

Новичок
вот тебе прелоад
PHP: 
var imgs=[
	{id: 'i1', src: 'i1.gif', pl: 50},
	{id: 'i2', src: 'i2.gif', pl: 50}
];

var cpl = 0;

/* Создание кэша изображений */ 
function preLoad(){ 
for(i=0;i<imgs.length;i++){ 
	var z = new Image();
	z.obj    = imgs[i];
	z.onload = function(){
		cpl += this.obj.pl;
		this.src = '#';
		alert(cpl);
	};
	z.src    = imgs[i].src; 
}
Он выводит изменяющийся cpl в алертах, думаю дальше сам доделаешь. Все данные по объекту находятся в this.obj, т.е. тебе вообще ну нужен никакой i
 

Avenus

Under Glory Yield
vovanium, спасибо... :)
Ты силен в ООП... я пока только с ним разбираюсь.

-~{}~ 02.05.09 02:13:

Теперь получается, что даже если браузер будет грузить страницу в несколько потоков, то для каждого изображения будет объект z, при onload которого и вызовет увеличение процента загрузки...
Т.е. уже неважно, первая загрузится картинка, или последняя... процент будет в соответствии с той, которая быстрее загрузится? :) класс...
 

vovanium

Новичок
Да, естественно, та что первой загрузится та первой и добавит свои проценты. И броузер будет именно параллельно грузить, можешь к примеру сделать php скрипт который будет выдавать файлы с задержкой типа
PHP: 
<?php
	sleep(1); // задержка перед выдачей
	header('Content-Type: image/gif');
	readfile('i1.gif');
?>
ну и посмотреть как загружаются картинки
 

Avenus

Under Glory Yield
vovanium, я не знал, что при задании массива изображений для кэширования, они все равно будут грузиться не по-очереди :)

-~{}~ 02.05.09 02:58:

Еще, во время загрузки страницы ... при показе прогресс бара... я затенил страницу полупрозрачным темным фоном... как в lightbox... но почему-то косяк... не до конца страницы затемняется...
Но это другая тема.
 

vovanium

Новичок
Avenus
Массив тут не причем, картинки кэшируются не в массив, а в кэш броузера. Просто когда ты присваиваешь значение src, то броузер не ждет пока картинка загрузится, он выполняет JS дальше.

Что касается фона, то это уже другая тема не стоит всё мешать в одну кучу, видимо неправильно размеры фоновой div'ки определяешь.
 

Avenus

Under Glory Yield
Кстати, в Opera не хочет грузить все картинки...
Пару прогоняет... а для остальных onload как бы не срабатывает и как раз выполняется window.onload...
который скрывает прогресс бар.
Странно очень...
 

x-yuri

Новичок
Нет, я имею ввиду, почему не работает:
pre.src='...';
pre.onload=function(){
alert(pre.src); /* ничего не выведет */
}
Нажмите для раскрытия...
что касается онлоад, то ты пойми что он выполняется, уже после того как функция в которой ты его сделал отработало, т.е. переменных которые были в той функции уже нет
Нажмите для раскрытия...
здесь что-то не так, из обработчика видны все переменные chLoad (функция в которой ты его сделал) и все глобальные переменные, но не видны переменные preLoad, например, даже если он вызовется после того, как chLoad завершиться. Вижу одну причину - обработчик был назначен после того, как картинка уже загрузилась (она уже была в кэше... помнишь, я говорил про порядок назначения src и onload?), т.е. обработчик не был вызван

Кстати, в Opera не хочет грузить все картинки...
Пару прогоняет... а для остальных onload как бы не срабатывает и как раз выполняется window.onload...
который скрывает прогресс бар.
Нажмите для раскрытия...
просто опера не подгружает каринки с display: none и window.onload вызывается до того, как подгрузятся картинки, загружаемые скриптом, а другие браузеры подгружают... думаю так
 

Avenus

Under Glory Yield
Точно, блин... и Opera 9.24 уже старая...
обновил до 9.64 - заработало :)
Кстати, так и есть, в onload прогресс бар сдвигается только для тех картинок, которые показываются.
Для тех, у которых display:none ... не засчитывается процент загрузки...
Как же это обойти?

-~{}~ 02.05.09 18:12:

Попробовал поменять местами:
сначала this.src='';
а потом только увеличение прогресс бара...
Теперь работает, странно... как это влияет

-~{}~ 02.05.09 18:13:

vovanium, верно ты написал:
cpl+=this.obj.pl;
this.src='#';
alert(cpl);
Нажмите для раскрытия...
alert после this.src='' ... а я до него ставил изменение прогресс бара :)

-~{}~ 02.05.09 18:15:

Еще раз спасибо всем участникам поста... ;)
Последний вопрос... есть у кого-нибудь IE6?
В нем работает вся эта конструкция или нет...
 

Avenus

Under Glory Yield
В IE6 похожая проблема, как была в Opera, только не устраняется :) но, думаю, про него можно уже забыть...
хватит пользоваться 6-й версией...
 
Войдите или зарегистрируйтесь для ответа.
Сверху