javascript - 如何在使用 Javascript 更改图像源后立即更新屏幕？

Question

我想在现有 <img> 中显示新图像标签。为此，我正在更新 src通过 Javascript 属性。但是，在更改 src 之后，屏幕不会更改以显示新图像加载。相反，它会等到新图像完全下载完毕，然后将其换入。

实际上，我正在设置 background-image的 <img>标记到正在加载的图像的缩略图 的 URL。目标是让质量较差的图像逐渐被质量好的版本取代。但是，由于新图像在加载时没有出现，所以我得到的只是旧照片，直到新图像突然出现。

下面是一个简化的例子。要真正看到效果，请打开您的 DevTools > Network 并将节流设置为慢一些。单击图像，然后等待它突然改变。这发生在 Firefox 和 Chrome 中，所以我猜这是设计使然。

有什么想法可以绕过这种行为吗？

const images = [
  "https://picsum.photos/id/1/200/300",
  "https://picsum.photos/id/2/200/300",
  "https://picsum.photos/id/3/200/300",
  "https://picsum.photos/id/4/200/300",
  "https://picsum.photos/id/5/200/300"
];
let index = 0;
const length = images.length;
const img = document.querySelector("img");

document.addEventListener("click", e => {
  index++;
  img.src = images[index % length];
});

<img src = "https://picsum.photos/id/1/200/300" />

Answer 1

要使当前图像在加载新图像时消失，您需要删除它的 src属性。
但是对于你的<img>要有大小，您需要明确设置它(这里我通过 CSS 完成)。

const images = [
  "https://picsum.photos/id/1/200/300",
  "https://picsum.photos/id/2/200/300",
  "https://picsum.photos/id/3/200/300",
  "https://picsum.photos/id/4/200/300",
  "https://picsum.photos/id/5/200/300"
];
let index = 0;
const length = images.length;
const img = document.querySelector("img");

document.addEventListener("click", e => {
  index++;
  img.removeAttribute("src");
  img.src = images[index % length];
});

img { background: red; width: 200px; height: 300px }

<img src = "https://picsum.photos/id/1/200/300" />