緩存的圖片的“轉換：不透明度1”無效。如何替換2個“ img”元素？

Question

因此，我通過將一個<img>元素替換為另一個來進行平滑的背景更改。 一切正常，但是如果我替換為已使用的圖像，過渡將無法進行。

點擊“背景2”。 它取代了完美。
點擊“背景3”。 結果相同。
單擊“背景1”或“背景2”。 崩潰了

我在Codepen上有代碼
您也可以在下面看到原始頁面：

<html>
  <head>
    <title>Background change</title>
    <meta charset="utf-8"/>
    <style>
      /* Nothing important */
      #background { z-index: -100; }
      .background {
        width: 100vw;
        height: 100vh;
        object-fit: cover;
        position: fixed;
        transition: opacity 2s;
      }
    </style>
    <script>
      function setBackground(url) {
        // --- Do not change if it is the same image
        if (background.getAttribute("src") == url) return
        // Create new background image elememt
        let newBackground = document.createElement("img")
        newBackground.id = "newBackground"
        newBackground.className = "background"
        // --- Place new img tag behind old img tag
        newBackground.style.opacity = 0
        newBackground.style.zIndex = -90
        newBackground.src = url
        // --- Insert img tag in DOM
        background.after(newBackground)
        // --- Start transition
        function start(){ console.log("start"); newBackground.style.opacity = 1 }
        // --- Runs after transition
        function end(){
          console.log("end")
          // --- Remove old img from DOM
          background.remove()
          // --- Set standard values for 'id' and 'z-index'
          newBackground.id = "background"
          newBackground.style.zIndex = -100
          // --- Assign 'background' to new img element (for future usage)
          background = document.getElementById("background")
        }
        newBackground.addEventListener("transitionend", end)
        // --- Start transition if img is cached
        // --- Maybe here is an error?
        if (newBackground.complete) start()
        else newBackground.addEventListener("load", start)
      }

      document.addEventListener("DOMContentLoaded", function(){
        background = document.getElementById("background")
      })
    </script>
  </head>
  <body>
    <img id="background" class="background" src="https://i.imgur.com/6IjDFqg.jpg"/>
    <button onclick="setBackground('https://i.imgur.com/6IjDFqg.jpg')">Background 1</button><br/>
    <button onclick="setBackground('https://i.imgur.com/Ai5Zbq1.jpg')">Background 2</button><br/>
    <button onclick="setBackground('https://i.imgur.com/9jHOYe9.jpg')">Background 3</button><br/>
  </body>
</html>

如何用純JavaScript中的過渡替換兩個<img>標簽？ 也許有一些更簡單的方法。 或者我只是做錯了什么。

（對不起我的英語不好）

Answer 1

還沒有足夠的時間來全面研究它，但是當設置complete標志時，好像沒有觸發transitionend事件，因此從不調用end函數來更改不透明度。

如果更改這兩行：

    if (newBackground.complete) start()
    else newBackground.addEventListener("load", start)

進入這個

    newBackground.addEventListener("load", start)

那么它將持續進行轉換（前提是您等到

緩存的圖片的“轉換：不透明度1”無效。如何替換2個“ img”元素？

問題描述

1 個解決方案

解決方案1
0 2019-08-16 20:37:11

緩存的圖片的“轉換：不透明度1”無效。 如何替換2個“ img”元素？

問題描述

1 個解決方案

解決方案1 0 2019-08-16 20:37:11

緩存的圖片的“轉換：不透明度1”無效。如何替換2個“ img”元素？

解決方案1
0 2019-08-16 20:37:11