Javascript 避免重复从服务器检索图像

我是网页设计新手。如果我的理解有误，请纠正我。我正在寻求在以下情况下可以避免浏览器和服务器之间往返的建议

想象一下javascript首先从服务器下载所有30~50个图像。然后，这些图像用于构建缩略图，每个缩略图的大小为60px×60px左右，供用户选择。这种效果是通过css和一些免费提供的javascript库实现的

单击其中一个缩略图后，javasrcipt会将该图像放置在更大的画布上。较大图像的大小根据其原始大小确定，约为900px 600px或更大。为了获得图像的原始大小，我在客户端对javascript进行编码，如下所示：

var img=new Image();
img.src="uploaded1.jpg";
var w,h;
w=img.width;
h=img.height;

我的问题是，这种设计在流量方面似乎非常低效，因为每个图像都会被下载3次：

用于渲染到图像库

javascript代码在

img.src=“uploaded1.jpg”处执行之后

对于通过javascript添加DOM节点后的大尺寸图像渲染：

此外，我希望允许用户随时上传更多图像，并将这些图像添加到图像库中。为了实现这一点，某些javascript必须设计为从服务器下载与此浏览器刚刚上载到服务器的图像完全相同的图像，以便将它们添加到DOM中，如下所示：

<img src="new1.jpg" alt="new image 1"/>
<img src="new2.jpg" alt="new image 2"/>

---

我不确定，但我认为告诉浏览器重用图像的最好方法是不要更改它的文件名，也不要更改文件本身。每次都应该使用相同的路径访问它。对同一文件的后续请求应该会导致从浏览器的缓存中获取该文件，对吗？实现这一点的方法是使用文件命名算法，为相同的图像/缩略图始终提供一个相同的名称。如果上载文件，则文件不在浏览器缓存中，由于文件名通常不同，因此必须下载一次。在我的实践中，浏览器缓存通常过于热情，缓存了太多数据（这会导致修改通过AJAX加载的文件时出现问题，缓存应该在测试时明确禁用，并在生产时启用）。您是否使用FireBug和Chrome资源跟踪器测试过您的站点

顺便说一句，我希望你不要在服务器上渲染更大的图像。这可能非常无效，尤其是如果经常这样做的话。canvas对象有很多快速简单的方法来完成最基本的图像处理任务，因此加载的唯一图像应该是之前上传的图像。服务器端唯一应该做的事情就是缩小规模。由于浏览器无法从远程站点访问本地文件，所以不可能直接在客户端执行此操作。该规则的每一个异常都应该作为一个主要错误报告

路由{full size user file}->{server}->{scaled down}->{client}似乎是无法避免的

enter code here