即使在更改源之后，舊圖像也會暫時顯示

Question

我們需要從右到左完全移動一個div（背景圖像和img在div標簽內），一旦div完全消失，我們需要再次從右邊開始移動div，但div中有不同的圖像。

一旦div完全消失，我們將div中的圖像源更改為新圖像。 但是在新圖像顯示在div上之前，舊圖像會暫時顯示。

以下是源代碼。

<!DOCTYPE html>
<html>
    <head>
        <style>
            html, body {
                background-image: url("background/moon_bg.png");
                background-repeat: no-repeat;
                background-size: cover;
                position: relative;
                height: 100%;
                width: 100%;
                margin: 0px;
            }

            #board {
                position: absolute;
                background-repeat: no-repeat;
                z-index: 99999;
            }
        </style>
    </head>
    <body>
        <div id="board">
            <img id="poster" src="//:0">
        </div>

        <script>
            var board = document.getElementById('board');
            var poster = document.getElementById('poster');

            var poster_images = ['IronMan.png',
                                 'gladiator.png',
                                 'Ghostbusters.png'];

            let bd_image_path = 'url(billboard/b.png)';
            let posterIndex = 0;
            let newPoster = true;
            let posterPath = 'posters/' + poster_images[posterIndex];;

            function moveLeft()
            {   
                if(newPoster === true) {
                    if(poster.complete === true) {
                        poster.style.left = '10px';
                        poster.style.top = '65px';
                        poster.style.width = '422px';
                        poster.style.height = '198px';
                        poster.style.position = 'absolute';

                        board.style.width = "441px";
                        board.style.height = "395px";
                        board.style.left = (window.innerWidth - 441) + "px";
                        board.style.top = (window.innerHeight - 415) + "px";
                        board.style.backgroundImage = bd_image_path;

                        poster.style.display = 'block';
                        newPoster = false;
                    }
                    else {
                        console.log('in else');
                    }
                }
                else {
                    board.style.left = board.style.left || 0;

                    if(parseInt(board.style.left) <= -(parseInt(board.style.width))) {
                        newPoster = true;
                        posterIndex ++;
                        if(posterIndex >= poster_images.length) {
                            posterIndex = 0;
                        }
                        posterPath = 'posters/' + poster_images[posterIndex];
                        poster.style.display = 'none';
                    }
                    else {
                        board.style.left = parseInt(board.style.left) - 2 + 'px';

                        poster.style.left = '10px'
                        poster.style.top = '65px';
                        poster.style.width = '422px';
                        poster.style.height = '198px';
                        poster.style.position = 'absolute';
                        poster.src = posterPath;
                    }
                }
                requestAnimationFrame(moveLeft);
            }

            moveLeft();
        </script>
    </body>
</html>

任何人都可以幫我解決這個問題。

Answer 1

我相信這歸結為緩存問題，您可以通過添加標識符來告知瀏覽器新的圖像，時間通常是最簡單的方法。

poster.src = posterPath + '?' + new Date().getTime();

Answer 2

您正在重置每個幀上的海報屬性，除非電路板剛退出屏幕。 下面的靜態屬性被連續調用，這會干擾src負載並顯示一幀的先前圖像。

                poster.style.left = '10px'
                poster.style.top = '65px';
                poster.style.width = '422px';
                poster.style.height = '198px';
                poster.style.position = 'absolute';
                poster.src = posterPath;

應將這些屬性（或至少src屬性）添加到上面的if語句中，以便僅在首次請求新海報時調用它們。 這將解決問題。 但是在實際的服務器上，第一次加載每個新圖像需要花費一些時間，因為它們沒有被預加載。 因此，您還應該添加預加載/緩存例程或事件處理程序，以便僅在下一個映像成功加載（onload）后從右側啟動映像。

即使在更改源之后，舊圖像也會暫時顯示

問題描述

2 個解決方案

解決方案1
2 已采納 2018-04-20 03:19:50

解決方案2
1 2018-04-20 03:34:15

即使在更改源之后，舊圖像也會暫時顯示

問題描述

2 個解決方案

解決方案1 2 已采納 2018-04-20 03:19:50

解決方案2 1 2018-04-20 03:34:15

解決方案1
2 已采納 2018-04-20 03:19:50

解決方案2
1 2018-04-20 03:34:15