单击按钮获取新的 lorem picsum

Question

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

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

Answer 1

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

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

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() returns 自 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 确实没有改变。这可能：

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

很可能，你的形象没有改变。

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

样本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;
}

编辑：

使用自 1970 年以来的毫秒数作为随机虚拟参数，这可能更好，因为您不必使用单独的变量来跟踪计数器。

示例代码：

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

Answer 5

致未来的 google 员工！

除了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 6

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

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>

单击按钮获取新的 lorem picsum

Get new lorem picsum on button click

javascript

lorem-ipsum