CODEWITHSUNDEEP
javascriptcsshtml
kadina
kadina

Reputation: 5382

old image is getting displayed momentarily even after changing the source

We need to move a div (which has background image and img inside div tag) from right to left completely and once the div completely disappears, we need to start moving the div from right again but with different image inside div.

Once the div completely disappears, we are changing the image source inside div to new image. But the old image is getting displayed momentarily before new image is getting displayed on the div.

Below is the source code.

<!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>

Can anyone please help me to fix this issue.

Upvotes: 3

Views: 642

Answers (2)

Matt Pilz
Matt Pilz

Reputation: 151

You are resetting the poster properties on every frame except when the board has just exited the screen. The static properties below are called continuously, which interferes with the src load and shows the prior image for one frame.

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

These properties (or at least the src attribute) should instead be added to the if statement above, so that they are only called when a new poster is first requested. This will resolve the issue. However on an actual server it will take a moment to load each new image for the first time, since they are not being preloaded. You should therefore also add preload/cache routines or event handlers to only start the image over from the right after the next image has been successfully loaded (onload).

Upvotes: 1

Second2None
Second2None

Reputation: 1600

I believe this comes down to caching issues, which you can fix by adding an identifier to tell the browser its a new image, time is normally the easiest way to do this. 

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

Upvotes: 3

Related Questions