Javascript 即使在更改源之后，旧图像也会立即显示
我们需要将一个div（在div标签中有背景图像和img）从右到左完全移动，一旦div完全消失，我们需要再次开始从右移动div，但div中有不同的图像 一旦div完全消失，我们将把div中的图像源更改为新图像。但在新图像显示在div上之前，旧图像会立即显示 下面是源代码Javascript 即使在更改源之后，旧图像也会立即显示,javascript,css,html,Javascript,Css,Html,我们需要将一个div（在div标签中有背景图像和img）从右到左完全移动，一旦div完全消失，我们需要再次开始从右移动div，但div中有不同的图像 一旦div完全消失，我们将把div中的图像源更改为新图像。但在新图像显示在div上之前，旧图像会立即显示 下面是源代码 <!DOCTYPE html> <html> <head> <style> html, body {
<!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>
html，正文{
背景图片：url（“background/moon_bg.png”）；
背景重复：无重复；
背景尺寸：封面；
位置：相对位置；
身高：100%；
宽度：100%；
边际：0px；
}
#董事会{
位置：绝对位置；
背景重复：无重复；
z指数：99999；
}
var board=document.getElementById（'board'）；
var poster=document.getElementById（“poster”）；
var poster_images=['IronMan.png'，
“gladiator.png”，
'Ghostbusters.png']；
让bd_image_path='url（billboard/b.png）'；
设posterIndex=0；
让newPoster=true；
让posterPath='posters/'+poster_图像[posterIndex]；；
函数moveLeft（）
{
如果（newPoster==真）{
如果（poster.complete==真）{
poster.style.left='10px'；
poster.style.top='65px'；
poster.style.width='422px'；
poster.style.height='198px'；
poster.style.position='绝对'；
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\u image\u路径；
poster.style.display='block'；
newPoster=false；
}
否则{
console.log（'in-else'）；
}
}
否则{
board.style.left=board.style.left | | 0；
if（parseInt（board.style.left）=海报图片长度）{
posterIndex=0；
}
posterPath='posters/'+海报图片[posterIndex]；
poster.style.display='none'；
}
否则{
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='绝对'；
poster.src=posterPath；
}
}
requestAnimationFrame（左移）；
}
左移（）；
任何人都可以帮我解决这个问题。我相信这可以归结为缓存问题，你可以通过添加一个标识符告诉浏览器它是一个新图像来解决，时间通常是最简单的方法
poster.src = posterPath + '?' + new Date().getTime();
您正在重置每个帧上的海报属性，但电路板刚退出屏幕时除外。下面的静态属性被连续调用，这会干扰src负载，并显示一帧的先前图像
poster.style.left = '10px'
poster.style.top = '65px';
poster.style.width = '422px';
poster.style.height = '198px';
poster.style.position = 'absolute';
poster.src = posterPath;