Добро пожаловать в форум, Guest  >>   Войти | Регистрация | Поиск | Правила | В избранное | Подписаться
Все форумы / HTML, JavaScript, VBScript, CSS Новый топик    Ответить
 Анимировать серию изображений  [new]
Alibek B.
Member

Откуда:
Сообщений: 3014
На сайте есть страница, на которой выводится изображение. Допустим, /img/live.jpg.
live.jpg это изображение с камеры, которое обновляется с определенной периодичностью.
Кроме того рядом с этим файлом сеть серия файлов live_00.jpg ... live_23.jpg — это изображения, которые обновляются каждый час.
Эти изображения иногда могут отсутствовать — например если на момент снятия изображения камера была недоступна.

Я хочу сделать так, чтобы когда пользователь водил мышкой по картинке, то выводилось изображение за разный период времени — левый край соответствует 0 часам, правый край соответствует 23 часам.
Если делать «в лоб», то получается так:
function CamAnimate() {
	var w = this.event.target.width;
	var h = this.event.target.height;
	var p = this.event.pageX - this.event.target.offsetLeft;
	if (p < 0) p = 0;
	if (p > w-1) p = w-1;
	var d = Math.floor(24*p/w);
	var b = this.event.target.dataset.base;
	var s = this.event.target.src;
	var m = s.match(/^(.+\/img\/live)(_[0-9]{2})?\.jpg$/);
	if (m)
	{
		s = m[1] + ((d==(new Date()).getHours()) ? b : 'live_'+('00'+d).substr(-2)) + '.jpg';
		this.event.target.src = s;
	}
}

В принципе работает, но плохо.
Во-первых, изображения загружаются при движении мышки и загрузка занимает какое-то время, поэтому "отзывчивость" при первоначальной загрузке страницы никакая. Впрочем это как раз легко решается предзагрузкой (элемент link с rel=preload).
Во-вторых, если соответствующее изображение отсутствует, то вместо изображения выводится маленький значок недоступного изображения и корежит страницу.
Наверное более правильным будет не менять напрямую src, а асинхронно загружать картинку и заменять ее в событии успешного завершения загрузки.
Не подскажите, как такое лучше решать? Может быть есть готовые библиотеки?
В принципе эта задача довольно сильно похожа на показ превью в видеоплеере.
31 янв 19, 22:14    [21799191]     Ответить | Цитировать Сообщить модератору
 Re: Анимировать серию изображений  [new]
вадя
Member

Откуда: Екатеринбург
Сообщений: 15464
Alibek B.
Во-вторых, если соответствующее изображение отсутствует, то вместо изображения выводится маленький значок недоступного изображения и корежит страницу.
картинку можно вставить в див и тогда при отсутствии картинки ничего корёжить не будет
31 янв 19, 22:22    [21799194]     Ответить | Цитировать Сообщить модератору
Все форумы / HTML, JavaScript, VBScript, CSS Ответить