Получить новый Lorem Picsum по нажатию кнопки

Question

Я пишу эту строку JavaScript несколько раз (по нажатию кнопки). Проблема в том, что я получаю случайное изображение в первый раз, а потом оно больше не меняется. Любая помощь, пожалуйста?

document.getElementsByTagName("body")[0].style.backgroundImage = "url(https://picsum.photos/200/300/?random)";

Answer 1

Скорее всего, ответ становится кэшированным.

Вы можете убедиться, что новые запросы создаются каждый раз, добавляя несущественное значение времени как

document.getElementsByTagName("body")[0].style.backgroundImage = "url(https://picsum.photos/200/300/?random&t=" + new Date().getTime() +")";

Answer 2

Это будет работать лучше. Вы получаете только ОДИН редирект, когда получаете CSS - браузер кэширует результат. Этот будет держать https://picsum.photos/200/300/?random от кэширования браузером. GetDate() возвращает количество миллисекунд с 1970 года

<button 
onclick='document.getElementsByTagName("body")[0].style.backgroundImage = 
"url(https://picsum.photos/200/300/?random&rnd"+new Date().getTime()+")"' 
type="button">Click</button>

Answer 3

Проблема, с которой вы сталкиваетесь, в основном связана с тем, что URL-адрес действительно не меняется. Это может:

1. Даже не вызывать новый запрос из вашего тега img
2. Быть поданным из кеша вашего браузера

Так что, скорее всего, ваше изображение не меняется.

Один из способов исправить это - передать дополнительный фиктивный параметр запроса, который изменяется при каждом запросе.

Пример URL: https://picsum.photos/200/300/?random&dummyParam=1 Вы можете увеличивать dummyParam каждый раз, чтобы он выглядел как новый URL для тега img и браузера.

Образец кода:

var cb = 0;
setInterval(function() {
  document.getElementsByTagName("body")[0].style.backgroundImage = "url(https://picsum.photos/200/300/?random&cb=" + (++cb) + ")";
}, 1000)

img {
  width: 200px;
  height: auto;
}

РЕДАКТИРОВАТЬ:

Ответ @mplungjan использует миллисекунды с 1970 года как случайный фиктивный параметр, и это может быть лучше, так как вам не нужно иметь отдельную переменную для отслеживания счетчика.

Образец кода:

document.getElementsByTagName("body")[0].style.backgroundImage = "url(https://picsum.photos/200/300/?random&cb=" + (+new Date()) + ")";

Answer 4

Для будущих гуглеров!

Кроме как Date.now(), вы можете использовать ID (или индекс цикла) в качестве tпараметр. Это полезно для приложений React.

      const data = [
  { id: 1, text: 'something' },
  { id: 2, text: 'something cool' },
  { id: 3, text: 'and another one' }
]

export default function App() {
  return (
    <div className="App">
      {data.map((item) => (
        <img
          alt={item.text}
          src={`https://picsum.photos/400/200?random&t=${item.id}`}
        />
      ))}
    </div>
  )
}

Answer 5

Добавить click слушателя кнопки и установите random параметр picsum.photos на случайное число.

Answer 6

Я подозреваю, что это не работает, потому что URL не изменяется; следовательно, браузер не будет пытаться получить другое изображение. Это, вероятно, сработает (однако кеширование все еще может быть проблемой), если вы ненадолго измените фоновое изображение на пустую строку, а затем добавите ссылку снова. Как это:

var element = document.getElementsByTagName("body")[0];
element.style.backgroundImage = "";
element.style.backgroundImage = "url(https://picsum.photos/200/300/?random)";