Получите новое изображение Lorem при нажатии кнопки

Question

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

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

Answer 1

Проблема, с которой вы сталкиваетесь, в основном связана с тем, что 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;
}

EDIT:

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

Пример кода:

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

Answer 2

Скорее всего, ответ кэшируется.

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

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

Answer 3

Это будет работать лучше. Вы получаете только ОДИН редирект, когда получаете 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 4

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

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