Форум Сайтостроение Веб-строительство

Нубский вопрос по JS (setInterval)

12
mff
На сайте с 21.02.2008
Offline
282
mff
1134

Здравствуйте коллеги!

Помогите пожалуйста с js. Мне нужно чтоб у тега img менялся атрибут src каждую секунду.

Пытаюсь что то сделать при помощи setInterval, но что то ни как не получается.

Вот путь к изображению: http://kuvat.kpo.fi/kuva9.jpg

За ранее спасибо! С ув.

Управление репутацией в сети: https://timbook2.ru/
NT
На сайте с 22.12.2014
Offline
35
Narek-T
#1

mff,

Например.

Менять lorempixel на свой.

Там с примером не сработало так как mixed content получается, jsfiddle на https а тот на http. Возможно у вас та же проблема, сайт на https а брать картинку пытаетесь с http.

Версия без jQuery

Страницы с mixed content Левые ссылки в описание Что делать с http?
mff
На сайте с 21.02.2008
Offline
282
mff
#2

Спасибо! Но почему то не работает и с этим URL: 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

<script>

	setInterval(function() {

		$('img').attr('src', 'https://lorempixel.com/400/200/');

	}, 1000);

</script>

</head>

<body>

<img id="img" src="" />

</body>

</html>

:(

NT
На сайте с 22.12.2014
Offline
35
Narek-T
#3

mff, Конечно не будет работать)

Во первых вы не подключили jquery но хотите его использовать.

Во вторых вынесли скрипт в head, и когда он срабатывает в DOM-е еще нет тега img. Оттуда и ошибка, соответственно ничего нет на экране.

Оберните в onLoad если хотите в head оставить скрипт, или спустите его ниже img..


<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
<img id="img" src="" />
<script>
	var img = document.getElementById('img');
	setInterval(function() {
		img.src = 'https://lorempixel.com/400/200/'
	}, 1000)
</script>
</body>
</html>
Порядок загрузки содержимого страницы 5 месячная история работы Спрашиваем и отвечаем по
mff
На сайте с 21.02.2008
Offline
282
mff
#4
Narek-T:
Во первых вы не подключили jquery но хотите его использовать.

😮

Я вас понял! $('img').attr('src') это же из jquery. Мои извинения!!! Спасибо про DOM. Сейчас попробую! С ув.

---------- Добавлено 03.02.2019 в 17:37 ----------

Narek-T, большое вам спасибо, за то что нашли время мне помочь! + заслуженный.

Сделал вот так и всё заработало: 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<img id="img" src="" />

<script>

    var img = document.getElementById('img');

    setInterval(function() {

        img.src = 'http://kuvat.kpo.fi/kuva9.jpg?'+Math.random();

    }, 1000)

</script>

</body>

</html>
Мне по сути нужно что то типа плеера написать для вот таких статичных веб-камер. С ув.
Слайдшоу на чистом Jquery Javascript : почему не Посоветуйте надежный бесплатный хостинг
Оптимизайка
На сайте с 11.03.2012
Offline
396
Оптимизайка
#5
mff:
Сделал вот так и всё заработало

Может работать "через раз" (например, если решите потом вынести скрипт в отдельный файл). Нужно всё это завернуть в


document.addEventListener("DOMContentLoaded", function() {
// тут ваш код
});

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

⭐ BotGuard (https://botguard.net) ⭐ — защита вашего сайта от вредоносных ботов, воровства контента, клонирования, спама и хакерских атак!
Как вывести на страницу PHP: вывод текста до динамический контент с помощью
NT
На сайте с 22.12.2014
Offline
35
Narek-T
#6
Оптимизайка:
Может работать "через раз".

Не может.

То что скрипт находится после объявления DOM элемента уже дает гарантию на то, что элемент существует (не null).

Но в loaded завернуть нужно, согласен, всякое может быть..

Оптимизайка
На сайте с 11.03.2012
Offline
396
Оптимизайка
#7

Narek-T, "например, если решите потом вынести скрипт в отдельный файл"

NT
На сайте с 22.12.2014
Offline
35
Narek-T
#8
Оптимизайка:
Narek-T, "например, если решите потом вынести скрипт в отдельный файл"

Отдельный файл тоже можно перед </body> подключить и это будет работать точно так же, не будет никаких проблем и все будет работать :)

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

Флудить заканчиваю)

Букварикс: бесплатная программа для Google Updates - апдейты internetbs.net
mff
На сайте с 21.02.2008
Offline
282
mff
#9

Коллеги, я чуть переделал код, хотел сделать еще кнопочку Стоп и Плэй: 

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8" />

</head>

<body>

<img id="img" src="" width="352" height="288" alt="Vuokatinrinteet" />

<br />

<input type="button" value="Стоп" onclick="clearInterval(intervalID)" name="btn"> 

<input type="button" value="Плэй" onclick="setInterval(interval,1000)" name="btn2">

<script>

		var img = document.getElementById('img');

		function interval(){

			img.src = 'http://kuvat.kpo.fi/kuva9.jpg?'+Math.random();

		};

		var intervalID=setInterval(interval,1000);

</script>

</body>

</html>

Но что то опять пошло ни так :( Первый раз когда нажимаю Стоп - работает, потом если нажать Плэй, начинает меняться картинка, но Стоп уже работать не будет. И еще если несколько раз нажать на Плэй - начинает быстрее менять картинку. Помогите пожалуйста добить. За ранее спасибо! С ув.

Стандартный слайдер dle сломался Белые Дорвеи или Дорвееподобные Веб Мани, надоело авторизовываться
Оптимизайка
На сайте с 11.03.2012
Offline
396
Оптимизайка
#10

https://jsfiddle.net/er42ta81/

12

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