Javascript 根据所选内容更新背景画布图像<；选项>；到服务器的往返次数最少

我需要根据用户在

select

下拉列表中选择的内容更新画布的背景图像。图像的url可以在

选项

标记的

值

属性中找到。但是什么是最好的方法呢？我认为图像会加载到下拉列表中的每个更改中。我是否应该首先将所有图像保留为

img

标签？这是我目前的代码：

var canvas=document.getElementById（“canvas”）；
var ctx=canvas.getContext（“2d”）；
$（“#bg”）。关于（“更改”，函数（）{
var curSrc=$（this.val（）；
var image=新图像（）；
image.src=curSrc；
image.onload=函数（）{
ctx.drawImage（图像，0,0,150,150）；
}//onload（）
});//#bg change（）

。作为控制台
{
显示：无！重要；
}

图1
图2
图3

您的代码看起来不错……根据页面中的图像数量，在开始将所有图像放入img标记时，加载所有图像将需要大量时间。在你的代码中，它会在需要的时候加载图像，看起来很好。在我看来，如果你有很重的图像，并且你将它们全部加载在一起，它会为用户创建糟糕的用户体验。按需加载对我来说似乎是更好的方法。。。如果图像数量有限，则可以使用前一种方法…

进行此操作的最佳方法是什么

Define

best

？如果你不是在寻找任何具体的解决方案，我认为任何关于

best

的讨论主要是观点-based@MohitBhardwaj在这种情况下，我将研究第一次加载时的缓存（由您控制）和/或甚至预加载和缓存，而在前端没有其他事情发生。