基于所选的<option>更新背景画布图像，最少往返服务器

Question

我需要根据用户在select下拉列表中选择的内容来更新画布的背景图像。可以在value代码的option属性中找到图片的网址。但是最好的方法是什么？我认为图像会加载下拉列表中的每个更改。我应该首先将所有图像作为img标记保留在页面上吗？这是我目前的代码：

＆＃13;

＆＃13;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

$("#bg").on("change", function(){
  var curSrc = $(this).val();
  var image = new Image();
  image.src = curSrc;
  image.onload = function(){
    ctx.drawImage( image, 0, 0, 150, 150 );
  }//onload()
});//#bg change()

＆＃13;

.as-console
{
  display: none !important;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<canvas id="canvas" width="150" height="150"></canvas>
<select id="bg">
  <option value="http://placehold.it/300x300?text=image+1">Image 1</option>
  <option value="http://placehold.it/300x300?text=image+2">Image 2</option>
  <option value="http://placehold.it/300x300?text=image+3">Image 3</option>
<select>

＆＃13;

＆＃13;

＆＃13;

的更新

我的问题是我也有很多文字字段。在更新任何字段（更改时）时，我重绘画布，包括再次加载和绘制图像。因此，如果有8个文本字段，那么即使在选择图像之后，当用户填写文本字段时，它将重新加载至少8次。我想知道这是否会导致服务器之旅，或者在这种情况下将从缓存加载图像。

我想知道的是：
 1.会像我多次一样加载相同的图像，导致多次访问服务器吗？  2.有没有更好的方法可以最大限度地减少到服务器的往返加载图像的次数？