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

Question

by_ultra @by_ultra

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

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

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

Вопрос задан более трёх лет назад
128 просмотров

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 Автор вопроса

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

Написано более трёх лет назад

Помогут разобраться в теме Все курсы

Нетология

Веб-разработчик с нуля: профессия с выбором специализации

14 месяцев

Далее
Академия Эдюсон

Fullstack-разработчик на JavaScript

11 месяцев

Далее
ProductStar × РБК

Профессия: Инженер по тестированию

6 месяцев

Далее

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

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

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

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

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

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

JavaScript

+1 ещё

Простой
Почему у поля input атрибут required не срабатывает?
- 1 подписчик
- вчера
- 102 просмотра
2

ответа
JavaScript

Простой
Будет ли корректно работать сортировка везде?
- 1 подписчик
- вчера
- 89 просмотров
3

ответа
JavaScript

Простой
Почему ничего не происходит — элементы p не добавляются на страницу?
- 1 подписчик
- вчера
- 52 просмотра
1

ответ
JavaScript

Простой
Почему при написании цикла for of работает, а при другом цикле не работает?
- 1 подписчик
- 15 апр.
- 368 просмотров
3

ответа
JavaScript

Простой
Почему зависает приложение? Почему не работает функция сортировки?
- 1 подписчик
- 14 апр.
- 237 просмотров
1

ответ
JavaScript

Простой
Почему не работает фильтрация?
- 1 подписчик
- 14 апр.
- 166 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Как обновлять данные массива, чтобы по нажатию на кнопку на странице добавлялся еще один элемент массива?
- 3 подписчика
- 12 апр.
- 719 просмотров
4

ответа
JavaScript

+1 ещё

Простой
Почему не работает код из js файла?
- 3 подписчика
- 12 апр.
- 673 просмотра
4

ответа
JavaScript

+1 ещё

Простой
Как остаться на той же странице при скачивании файла?
- 1 подписчик
- 08 апр.
- 304 просмотра
2

ответа
JavaScript

+1 ещё

Простой
Как отправить ajax запрос по чекбоксам?
- 2 подписчика
- 07 апр.
- 220 просмотров
1

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

Frontend-разработчик (vanilla JS, high-load)

Karma8

от 200 000 ₽

Fullstack developer (python/react)

Крона Лабс • Екатеринбург

от 200 000 ₽

Frontend Developer (Vue.js) Middle / Senior

UPBEAT SOFT

от 150 000 до 300 000 ₽

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

<!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?

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

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

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