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

12
mff
На сайте с 21.02.2008
Offline
252
mff
1076

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

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

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

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

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

NT
На сайте с 22.12.2014
Offline
35
#1

mff,

Например.

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

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

Версия без jQuery

mff
На сайте с 21.02.2008
Offline
252
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
#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>
mff
На сайте с 21.02.2008
Offline
252
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>
Мне по сути нужно что то типа плеера написать для вот таких статичных веб-камер. С ув.
Оптимизайка
На сайте с 11.03.2012
Offline
396
#5
mff:
Сделал вот так и всё заработало

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


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

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

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

Не может.

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

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

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

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

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

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

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

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

mff
На сайте с 21.02.2008
Offline
252
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>

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

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

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