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

Question

by_ultra @by_ultra

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

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

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

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

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

+3 ещё

Простой
Как отключить swiper-bundle.min.css?
- 1 подписчик
- 2 часа назад
- 27 просмотров
1

ответ
JavaScript

Простой
Почему не правильно срабатывает условие в цикле?
- 1 подписчик
- 2 часа назад
- 52 просмотра
0

ответов
JavaScript

+2 ещё

Средний
Расскажите про паттерны работы с GraphQL?
- 6 подписчиков
- 8 часов назад
- 288 просмотров
0

ответов
JavaScript

Средний
Как сделать swiper autoplay с несколькими видео?
- 1 подписчик
- 20 часов назад
- 52 просмотра
0

ответов
JavaScript

+2 ещё

Простой
Почему неправильное время в Java Script?
- 1 подписчик
- 20 часов назад
- 115 просмотров
0

ответов
JavaScript

Простой
Как получить родителя с определенным атрибутом?
- 1 подписчик
- 22 часа назад
- 47 просмотров
1

ответ
JavaScript

Простой
Есть ли какой нибудь полифил для importmap?
- 1 подписчик
- вчера
- 55 просмотров
2

ответа
JavaScript

+1 ещё

Простой
Ошибка three на редми ноте 7 как решить?
- 1 подписчик
- вчера
- 80 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Какой тип данных у RegExp, TypedArray и других?
- 1 подписчик
- вчера
- 123 просмотра
1

ответ
JavaScript

+2 ещё

Простой
Мулти селект Dropdown. Как можно создать многослойный мулти селект?
- 1 подписчик
- вчера
- 78 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Бэкэнд-разработчик JavaScript

Wanted. • Москва

от 250 000 до 400 000 ₽

JavaScript Fullstack

OnClass

от 2 000 до 7 000 $

Подскажите, кто сможет реализовать?

25 дек. 2024, в 19:33

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

Создать ТГ бота для анализа графиков

25 дек. 2024, в 18:09

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

Монтаж видео, аудио. Создание песен Suno. Озвучка текстов в Elevenlabs

25 дек. 2024, в 17:35

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?

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

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

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