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

Question

by_ultra @by_ultra

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

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

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

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

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 ещё

Простой
Где можно увидеть реализацию такого эффекта при скролле?
- 1 подписчик
- 41 минуту назад
- 14 просмотров
0

ответов
JavaScript

Простой
Fetch дает ошибку?
- 1 подписчик
- 6 часов назад
- 67 просмотров
0

ответов
PHP

+1 ещё

Простой
Как исправить "Undefined array key «login»,"password" в $_POST?
- 1 подписчик
- 8 часов назад
- 70 просмотров
1

ответ
HTML

+2 ещё

Средний
Почему у меня не отображаются кнопки?
- 1 подписчик
- 12 часов назад
- 81 просмотр
2

ответа
HTML

+1 ещё

Простой
Правильно ли с точки зрения семантики БЭМ я расставляю wrapper'ы и вообще называю дивы?
- 1 подписчик
- 16 часов назад
- 77 просмотров
0

ответов
JavaScript

Простой
Обьясните про функцию массив?
- 3 подписчика
- 20 часов назад
- 441 просмотр
1

ответ
HTML

+1 ещё

Простой
Как установить одну и ту же ширину элементов в разных блоках?
- 1 подписчик
- вчера
- 70 просмотров
1

ответ
HTML

+1 ещё

Простой
Как расположить контент сайта на всю высоту?
- 1 подписчик
- вчера
- 53 просмотра
1

ответ
HTML

+1 ещё

Простой
Паддинг и Маргин ломает длину и ширину, не получается выставить отступы внутри блока?
- 1 подписчик
- вчера
- 58 просмотров
1

ответ
JavaScript

+1 ещё

Простой
Почему JS не видит SVG-элементы по ID?
- 1 подписчик
- вчера
- 68 просмотров
1

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

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

Rocket • Смоленск

от 80 000 до 130 000 ₽

Fullstack разработчик JavaScript, php

Дорстрой-36 • Воронеж

от 100 000 до 200 000 ₽

JavaScript FullStack developer

Wanted. • Санкт-Петербург

До 220 000 ₽

Создать сервер VPS через wireguard

24 нояб. 2024, в 00:04

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

Добавить интеграцию оплаты Telegram Payments 2.0 в Mini App (React)

23 нояб. 2024, в 23:30

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

Нарисовать инфографику в 3-х вариантах

23 нояб. 2024, в 23:03

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

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

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

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

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

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