6

我多次编写这行javascript（单击按钮）。问题是我第一次得到一个随机图像，然后它就不再改变了。请问有什么帮助吗？

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

4

6 回答 6

9

很可能响应正在被缓存。

您可以通过附加一个无关紧要的时间值来确保每次都创建一个新的请求

document.getElementsByTagName("body")[0].style.backgroundImage = "url(https://picsum.photos/200/300/?random&t=" + new Date().getTime() +")";
于 2018-05-02T11:35:33.603 回答
6

这会更好。当您获得 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>

于 2018-05-02T11:36:35.030 回答
2

您面临的问题主要是由于 URL 确实没有改变。这可能：

  1. 甚至不会从您的 img 标签触发新请求
  2. 从您的浏览器缓存提供服务

所以很有可能，你的形象不会改变。

解决此问题的一种方法是传递一个额外的虚拟查询参数，该参数在每个请求上都会发生变化。

示例 URL： https://picsum.photos/200/300/?random&dummyParam=1 您可以每次增加 dummyParam，使其看起来像 img 标记和浏览器的新 URL。

示例代码：

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()) + ")";

于 2018-05-02T11:36:56.003 回答
1

对于未来的谷歌人！

除了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>
  )
}
于 2021-04-05T15:06:44.277 回答
0

为按钮添加click监听器，并将random参数设置picsum.photos为随机数。

document.querySelector("button").addEventListener("click", () => {
  document.body.style.background = 
    `url(https://picsum.photos/200/300?random=${Math.random()})`;
});
<button>
  Click me to generate a new background image
</button>

于 2021-05-05T15:36:09.830 回答
-1

我怀疑它不起作用，因为 URL 没有改变；因此浏览器不会尝试检索另一个图像。如果您将背景图像短暂更改为空字符串，然后再次添加链接，它可能会起作用（但是缓存可能仍然是一个问题）。像这样：

var element = document.getElementsByTagName("body")[0];
element.style.backgroundImage = "";
element.style.backgroundImage = "url(https://picsum.photos/200/300/?random)";
于 2018-05-02T11:35:29.287 回答