Menu
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.
656
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();
answered Feb 05 '26 21:02
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With