Анимировать серию изображений / HTML, JavaScript, VBScript, CSS

ReSQL.ru

Мобильная версия Контакт Правила FAQ Помощь

Гость

Войти | Регистрация | Профиль | Очистить

Новые сообщения | Избранное

Форумы | Пользователи | Статистика | Мод. лог | Поиск

Цитировать

Написать

Автор*:

Ввести пароль для входа

Тема*:

Сообщение

Данное сообщение тематическое

Сообщение содержит картинки или видео 18+

Автор:

ВНИМАНИЕ! На данном подфоруме действуют строгие правила. Удостоверьтесь, что ваше сообщение соответствует им!

Форум или тема закрыты для гостей. Необходима авторизация!

Загрузить последнюю сохраненную версию

Вложение:

Вставить как галерею

Максимальный размер вложений: 4,0 МБ, аудио/видео: 8,0 МБ. Картинки большего размера ужимаются, если возможно.

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

Отправляя сообщение, я выражаю свое согласие с правилами форума и принимаю пользовательское соглашение.

Доб. в избранное | Игнор. тему | Прикреп. тему | Пометить прочит. / непрочит. | Фильтр

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Анимировать серию изображений

2 сообщений из 2, страница 1 из 1

Анимировать серию изображений

#39767839

Alibek B

Участник

Сообщения: 3 881

Рейтинг: 0 / 0

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

Я хочу сделать так, чтобы когда пользователь водил мышкой по картинке, то выводилось изображение за разный период времени — левый край соответствует 0 часам, правый край соответствует 23 часам.
Если делать «в лоб», то получается так:

Код: javascript

1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.

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, а асинхронно загружать картинку и заменять ее в событии успешного завершения загрузки.
Не подскажите, как такое лучше решать? Может быть есть готовые библиотеки?
В принципе эта задача довольно сильно похожа на показ превью в видеоплеере.

...

Рейтинг:

0 / 0

31.01.2019, 22:14

| Ответить | Цитировать | Написать

Анимировать серию изображений

#39767841

вадя

Участник

Откуда: Екатеринбург

Сообщения: 19 399

Рейтинг: 0 / 0

Alibek B.Во-вторых, если соответствующее изображение отсутствует, то вместо изображения выводится маленький значок недоступного изображения и корежит страницу.картинку можно вставить в див и тогда при отсутствии картинки ничего корёжить не будет

...

Рейтинг:

0 / 0

31.01.2019, 22:22

| Ответить | Цитировать | Написать

2 сообщений из 2, страница 1 из 1

Форумы / HTML, JavaScript, VBScript, CSS [игнор отключен] [закрыт для гостей] / Анимировать серию изображений

Читали тему (0):

Читали форум (0):

Пользователи онлайн (0):

start [/forum/topic.php?desktop=1&fid=22&tid=1443889]:	0ms
get settings:	9ms
get forum list:	13ms
check forum access:	3ms
check topic access:	3ms
track hit:	159ms
get topic data:	11ms
get forum data:	2ms
get page messages:	40ms
get tp. blocked users:	1ms
others:	12ms

total:	253ms