Javascript 更改屏幕上显示的图像的有效方法<；img>；？

在javascript中，我有一个对新图像URL的DOM

属性的引用。这是可行的，但仍然存在一个问题：我需要每秒更改图像多次，更改
src
属性会导致浏览器对图像执行新的GET请求（已缓存），这会给web服务器带来压力，因为同时会有数百个客户端

我目前（效率低下）的解决方案是这样做的：


let image=document.querySelector（“img”）；
setInterval（函数（）{
image.src=getNextImageURL（）；//这会导致GET请求
}, 10);
函数getNextImageURL（）{
/*…实施*/
}
我认为您需要以不同的方式编写代码

如果您想减少请求，您应该将所有图像合并到一张精灵表中。
这个技巧在游戏中的动画中使用得太多了。
但您需要更改


let元素=document.querySelector（“div”）；
设i=1
setInterval（函数（）{
element.style.backgroundPosition=getnextimageposition（i++）；//这将更改位置
}, 100);
函数GetNextPostion（nextPos）{
/*…实施*/
//这只是为了试试
//6是表中的图像数
//20是图纸中一段的高度
var posX=100*（下一个目标为%6）；
//第一个是x上的位置，第二个是y上的位置
返回“-”+posX+“px 0px”；
}
.image{
宽度：100px；/*单个图像的宽度*/
高度：100px；/*单个图像的高度*/
背景图片：url(https://picsum.photos/500/100?image=8)/*指向您的精灵表的路径*/
}
如果sprite床单的想法不起作用（例如，因为你有大图像），那么使用一个

您只需预加载所有图像，将它们存储在阵列中，然后在画布上逐个绘制它们：


constURL=新数组（35）.填充（0）.映射（（v，i）=>
'https://picsum.photos/500/500?image=“+i
);
//加载所有图像
const loadImg=Promise.all(
url.map（url=>
新承诺（（res，rej）=>{
//每个url都有自己的url{
//准备画布
const canvas=document.getElementById（'canvas'）；
//设定它的大小
canvas.width=canvas.height=500；
//获取图形上下文
const ctx=canvas.getContext（'2d'）；
设i=0；
//启动动画
动漫（）；
函数anim（）{
//在下次屏幕刷新时再次执行此操作（在60Hz显示器上约16ms）
请求动画帧（anim）；
//增加我们的索引
i=（i+1）%imgs.长度；
//绘制所需的图像
ctx.drawImage（imgs[i]，0,0）；
}
})
.catch（console.error）；
渲染你需要的所有图像，隐藏它们，然后显示你想要的图像。这是你不需要更多HTTP请求就能做到这一点的唯一方法。我喜欢这个解决方案，但是，你不能用太大的图像来做这件事，它会太重……我认为这是最好的解决方案，他想制作动画啊，我想这可能是我需要做的。我希望会有一个更简单的方法，但我想不会。谢谢！