Как изменять изображение при перезагрузке страницы через JS?

Question

by_ultra @by_ultra

Как изменять изображение при перезагрузке страницы через JS?

Есть массив картинок 5-6 (). Требуется изменять картинку в HTML (рандомно), не background при каждом обновлении страницы.

Из того, что удалось нагуглить, данные действия производятся через window.onload и localStorage, но всё никак не могу это собрать в месте.
Буду очень признателен за вашу помощь или нужные ссылки.

Вопрос задан более года назад
102 просмотра

13 комментариев

Подписаться 1 Простой 13 комментариев

Алексей @SPART4K

Задача просто чтобы картинки менялись рандомно когда заходишь на сайт? Или именно при перезагрузки, мол заходишь в первый раз у тебя одни картинки ( всегда ), а при перезагрузке у тебя рандомом они меняются, потом закрываешься браузер и опять так-же ?

Написано более года назад
by_ultra @by_ultra Автор вопроса

Алексей, второй вариант : "мол заходишь в первый раз у тебя одна картинка ( всегда ), а при перезагрузке у тебя рандомом они меняются, потом закрываешься браузер и опять так-же ?"

Написано более года назад
Noder SS @noder_ss

by_ultra, Могу сам сверстать, идёт?

Написано более года назад
by_ultra @by_ultra Автор вопроса

Ростик Кальченко, Буду благодарен, что-то самостоятельно не выходит (

Написано более года назад

Noder SS @noder_ss

Так нужно было?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="images">
        <img src="img1.jpeg" alt=""width="500">
        <img src="img2.png" alt=""width="500">
        <img src="img3.jpg" alt=""width="500">
        <img src="img4.webp" alt=""width="500">
        <img src="img5.jpeg" alt=""width="500">
    </div>
</body>
<style>
    .images img{
        display: none;
    }
</style>
<script>
    let images = Array.from(document.querySelectorAll('.images img'))
  let random = Math.floor(Math.random()*images.length)
let item = images[random]
item.style.display = "unset"
</script>
</html>

при обновлении меняется картинка

Написано более года назад

by_ultra @by_ultra Автор вопроса

Ростик Кальченко, Да эффект именно такой, только единственный момент, картинки после перезагрузки страницы сразу все загружаются, а потом остается одна, можно ли это как-то поправить.?

Написано более года назад
Noder SS @noder_ss

by_ultra, А это как-то мешает?

Написано более года назад
by_ultra @by_ultra Автор вопроса

Ростик Кальченко, Просто при слабом интернете - это заметно и будет не совсем юзер френдли, как мне кажется.

Написано более года назад
Noder SS @noder_ss

by_ultra, Это уже беккенд, а точнее Ajax

Написано более года назад
by_ultra @by_ultra Автор вопроса

Ростик Кальченко, Либо подставлять массив картинок через JS, в котором рандомно выбирается одна картинка, как советовал коллега выше, но таким способом у меня не хватило навыка.

Написано более года назад
Noder SS @noder_ss

by_ultra, Если так мешает загрузка, сделайте изображения по ссылке, подгрузка как раз будет

Написано более года назад
Noder SS @noder_ss

by_ultra, у меня как раз и есть массив в том примере

Написано более года назад
by_ultra @by_ultra Автор вопроса

Ростик Кальченко, Спасибо.

Написано более года назад

Решения вопроса 1

Комментировать

Пригласить эксперта

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

JavaScript

+2 ещё

Простой
Добавление определенного класса к header при прокрутке до определенного блока?
- 1 подписчик
- час назад
- 19 просмотров
0

ответов
JavaScript

Простой
Почему не срабатывает prototype reverse на строке?
- 1 подписчик
- 12 часов назад
- 46 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как лучше обратиться к кнопке через id или через class?
- 2 подписчика
- 13 часов назад
- 91 просмотр
2

ответа
JavaScript

+2 ещё

Простой
Как сделать ajax фильтрацию по категориям в WP?
- 1 подписчик
- 14 часов назад
- 25 просмотров
0

ответов
JavaScript

Средний
Как сделать, чтобы встроенный обработчик события убрал сам себя?
- 3 подписчика
- 17 часов назад
- 433 просмотра
0

ответов
JavaScript

Простой
Как реализовать карирование так, чтобы оно не было замкнуто на одну переменную?
- 1 подписчик
- 20 часов назад
- 78 просмотров
0

ответов
JavaScript

+2 ещё

Простой
Галерея 3DWave. Перевел HTML в JS. Не работает.?
- 1 подписчик
- вчера
- 81 просмотр
0

ответов
HTML

+3 ещё

Простой
Flask вывод изображения из базы данных?
- 1 подписчик
- вчера
- 75 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как совместить JS и Django?
- 1 подписчик
- вчера
- 93 просмотра
1

ответ
JavaScript

Сложный
Как сделать горизонтальный виртуальный скролл?
- 1 подписчик
- вчера
- 68 просмотров
0

ответов
Показать ещё Загружается…

JavaScript разработчик

SummerWeb • Ярославль

от 100 000 до 140 000 ₽

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Middle JavaScript Developer

AppsTrain.io

от 80 000 до 180 000 ₽

Создать простой зеро блок на тильда или html блок

02 мая 2024, в 11:31

500 руб./за проект

Ищем кодера для доработки сайта на bitrix24

02 мая 2024, в 11:28

1000 руб./в час

Доработать квиз на React

02 мая 2024, в 11:14

5000 руб./за проект

Задача просто чтобы картинки менялись рандомно когда заходишь на сайт? Или именно при перезагрузки, мол заходишь в первый раз у тебя одни картинки ( всегда ), а при перезагрузке у тебя рандомом они меняются, потом закрываешься браузер и опять так-же ?
Алексей, второй вариант : "мол заходишь в первый раз у тебя одна картинка ( всегда ), а при перезагрузке у тебя рандомом они меняются, потом закрываешься браузер и опять так-же ?"
Ростик Кальченко, Буду благодарен, что-то самостоятельно не выходит (
Так нужно было?

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="images"> <img src="img1.jpeg" alt=""width="500"> <img src="img2.png" alt=""width="500"> <img src="img3.jpg" alt=""width="500"> <img src="img4.webp" alt=""width="500"> <img src="img5.jpeg" alt=""width="500"> </div> </body> <style> .images img{ display: none; } </style> <script> let images = Array.from(document.querySelectorAll('.images img')) let random = Math.floor(Math.random()*images.length) let item = images[random] item.style.display = "unset" </script> </html>

при обновлении меняется картинка
Ростик Кальченко, Да эффект именно такой, только единственный момент, картинки после перезагрузки страницы сразу все загружаются, а потом остается одна, можно ли это как-то поправить.?
Ростик Кальченко, Просто при слабом интернете - это заметно и будет не совсем юзер френдли, как мне кажется.
by_ultra, Это уже беккенд, а точнее Ajax
Ростик Кальченко, Либо подставлять массив картинок через JS, в котором рандомно выбирается одна картинка, как советовал коллега выше, но таким способом у меня не хватило навыка.
by_ultra, Если так мешает загрузка, сделайте изображения по ссылке, подгрузка как раз будет
by_ultra, у меня как раз и есть массив в том примере

Answer 1 · 2022-11-09 11:21:10

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

Как изменять изображение при перезагрузке страницы через JS?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт