加载时Javascript帧动画闪烁

这是动画的代码笔。它在显示的第一个帧周期内闪烁。有没有办法阻止这种情况发生

任何帮助都将不胜感激

let frames=[
"http://i.imgur.com/QhvQuaG.png", 
"http://i.imgur.com/VjSpZfB.png",
"http://i.imgur.com/Ar1czX0.png",
"http://i.imgur.com/ROfhCv4.png",
"http://i.imgur.com/6B32vk7.png",
"http://i.imgur.com/2t5MWOL.png",
"http://i.imgur.com/a9wLBbc.png",
"http://i.imgur.com/OBKcW8f.png",
"http://i.imgur.com/RC6wLgw.png",
"http://i.imgur.com/2HyI8yS.png"];
让startframe=0；
函数箭头（）{
让我们开始=Date.now（）；
let timer=setInterval（函数（）{
让timePassed=Date.now（）-start；
如果（时间经过>=20000）{
clearInterval（计时器）；//2秒后完成动画
返回；
}
move（）；
}, 200); 
}
函数move（）{
if（startframe==（frames.length-1））{
开始帧=0；
}否则{
startframe++；
}
//document.getElementById（'continue'）.style.backgroundSize=“100%”；
document.getElementById（'continue'）.style.background=“url（“+frames[startframe]+”）；
document.getElementById（'continue'）.style.backgroundSize=“100%”；
}

#继续{
宽度：80px；
高度：40px；
}

开始

这是因为第一次查看时需要加载图像。可以以不同的方式预加载图像

如果查看浏览器开发工具的“网络”选项卡，您将看到浏览器加载图像时会出现闪烁

在开始动画之前，应预加载所有图像，如下所示：

let frames=[
"http://i.imgur.com/QhvQuaG.png", 
"http://i.imgur.com/VjSpZfB.png",
"http://i.imgur.com/Ar1czX0.png",
"http://i.imgur.com/ROfhCv4.png",
"http://i.imgur.com/6B32vk7.png",
"http://i.imgur.com/2t5MWOL.png",
"http://i.imgur.com/a9wLBbc.png",
"http://i.imgur.com/OBKcW8f.png",
"http://i.imgur.com/RC6wLgw.png",
"http://i.imgur.com/2HyI8yS.png"
]
var startframe=0
var images=[]//此数组将包含所有下载的图像
函数preload images（）{
已加载变量=0
对于（i=0；i=帧长度）{
箭头（）
}
}
图像[i].src=frames[i]
}
}
函数箭头（）{
让我们开始=Date.now（）；
let timer=setInterval（函数（）{
让timePassed=Date.now（）-start；
如果（时间经过>=20000）{
clearInterval（计时器）//2秒后完成动画
返回；
}
移动（）
}, 200)
}
函数move（）{
var c=document.getElementById（'continue'）
c、 innerHTML=''//删除#continue的内容
//插入已从图像阵列中退出的图像
//而不是使用css再次下载
c、 附加（图像[startframe]）
if（startframe>=frames.length-1）{
开始帧=0
}
否则{
起动架++
}
}

#继续{
宽度：80px；
高度：40px；
}
#继续>img{
最大宽度：100%；
}

开始

链接在哪里？@ikbel谢谢！没问题，看看下面我的答案。