javascript - 仅在完全解码时显示图像不起作用

Question

我在 Chromium 中运行一个 Raspberry Pi 3，用于显示当前播放的歌曲的自定义 Spotify 界面。虽然这本身有效，但一首歌曲到另一首歌曲之间的过渡非常不稳定，我只是不知道该怎么做。应该发生的是图像和背景在图像完全加载之前不会淡入，例如，它不应该被切成两半。
但正如您在此处看到的那样，情况并非如此(它仅适用于几帧，但您可以清楚地看到它是如何首先只显示封面艺术的五分之一，然后跳转到完整图像):https://i.imgur.com/pQsQ26r.mp4
作为引用，应该是这样的:https://i.imgur.com/QWY1J38.gif
在普通 PC 上，这已经非常流畅了，但我认为 RP3 太慢了，无法及时解码。所以，很自然地，我以为我的问题会这样解决，但结果仍然是你在第一个视频中看到的:

function changeImage(newImage) {
    var preloadImg = new Image();
    preloadImg.src = newImage;
    preloadImg.decode().then(() => {
        let artworkUrl = makeUrl(preloadImg.src);
        document.getElementById("artwork-img").style.backgroundImage = artworkUrl;
        document.getElementById("background-img").style.backgroundImage = artworkUrl;
        setArtworkOpacity("1");
    });
    setArtworkOpacity("0");
}

function setArtworkOpacity(value) {
    // the smooth fade itself is done via CSS "transition: opacity 1s;"
    document.getElementById("artwork-img").style.opacity = value;
    document.getElementById("background-img").style.opacity = value;
}

我也试过 img.onload ，同样的结果。
这是错误的方法吗？理想情况下，会有一个函数“在图像完全绘制之前不要执行”，在这种情况下我会移动 setArtworkOpacity("1")进入它的回调，但我找不到类似的东西。

Answer 1

如果我还能回答这个...
您说您尝试使用 img.onload 但没有显示您的实现。
我经常使用这个，它非常有效，所以看看它。
它基本上依赖于带有 HTML 属性绑定(bind)的 css。

const image = document.querySelector(".image");

function setLoaded(e) {
  e.target.setAttribute('loaded', true);
}

image.addEventListener("load", setLoaded);

setTimeout(() => {
  image.removeAttribute("loaded");
  image.setAttribute("src", "https://source.unsplash.com/1600x900/?test");
}, 2000);

html,
body {
  margin: 0;
}

.image {
  opacity: 0;
  transition: opacity 0.3s ease;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
}

.image[loaded] {
  opacity: 1;
}

<img src="https://source.unsplash.com/random" class="image" alt="some image" />

编辑:
只是为了确保我足够清楚，这里有一个更完整的答案。
我可以看到你依赖 backgroundImage显示您的数据。但是关于 css 中背景图像的问题是它的 react 方式与正确的 img 标签不同。
您使用 Image构造函数，但是一旦你最终只将 url 放在 css 属性中，你就会失去它的所有好处。因为你只通过 newImage网址， 所有的 javascript 图像处理都消失了，并且白费了 . css 正在读取 url 并尝试尽可能快地显示您的图像，此时没有任何 Js 技巧可以拯救您，并且它会产生您非常讨厌的小故障。
只需使用默认的 HTML img，就可以省去很多麻烦。标记并添加您的 newImage网址在他们各自的 src属性。
通过使用适当的语义标签而不是简单的 div 的背景图像，您还将获得一点可访问性。
请考虑下面使用 changeImage 的代码功能:
你可以看到 loaded在 css 中使用 boolean 来处理过渡而不使用 JS。

// get your elements ref in here
const images = document.querySelectorAll("img");

function setLoaded(e) {
  e.target.setAttribute('loaded', true);
  // check the CSS now
}

images.forEach(image => {
  image.addEventListener("load", setLoaded);
});

function changeImage(newImage) {
  const background = document.querySelector(".background");
  const cover = document.querySelector(".cover");

  background.removeAttribute("loaded");
  cover.removeAttribute("loaded");

  background.setAttribute("src", newImage);
  cover.setAttribute("src", newImage);
}

setTimeout(() => {
  changeImage("https://source.unsplash.com/1600x900/");
}, 2000);

setTimeout(() => {
  changeImage("https://source.unsplash.com/1920x1080/");
}, 4000);

html,
body {
  margin: 0;
}

.header {
  position: relative;
  padding-top: 240px;
  background: linear-gradient(rgba(255, 255, 255, 0), rgba(255, 255, 255, 1));
  display: flex;
  justify-content: center;
}

img {
  opacity: 0;
  transition: opacity .5s ease;
}


/* Here's where the loaded boolean does its magic */

img[loaded] {
  opacity: 1;
}

.background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

.cover {
  width: 120px;
  height: 120px;
  box-shadow: 0 8px 16px rgb(33 33 33 / 50%);
  object-fit: cover;
}

<header class="header">
  <img src="https://source.unsplash.com/random" class="background" />
  <img src="https://source.unsplash.com/random" class="cover" />
</header>