避免从服务器反复重复图像

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

想象的JavaScript首先下载从服务器中所有30〜50幅图像。这些图像然后用于构建缩略图图像，每个图像尺寸为60px x 60px左右，供用户选择。这种效果是用CSS和一些免费提供的JavaScript库实现的。

缩略图像一个被点击后，javasrcipt然后放在一个更大的画布图像。较大图像的尺寸根据其原始尺寸约900px X 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";
大尺寸图像的描绘执行DOM节点已经由JavaScript添加后：<img src="uploaded1.jpg" alt="big image"/>

此外，我想允许用户随时上传更多图片并将这些图片添加到图片库中。为了实现这一点，一些JavaScript的设计必须准确地下载相同的图像，这同一个浏览器刚刚上传到服务器，从服务器，以便它们可以被添加到DOM这样的：

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

是什么对我来说没有意义的是这些图像所产生的浏览器和服务器之间的往返旅程。当浏览器获得这些图像的第一手信息时，浏览器显然不需要从服务器重新加载相同的图像。

因为它是这些上传图像文件和渲染图像相同的浏览器，理论上应该存在某种方式告诉浏览器重复使用这些图片 - 前或在上传之后使它们。该页面必须设计为以这种低效率的方式工作，这仅仅是因为在HTML世界中，JavaScript无法通过操作DOM将内存中的图像传送到浏览器。

SVG的local IRI reference可能会有所帮助。我可以在<defs>好吗实施<image>元素，但我不知道浏览器（IE 9尤其是）将再次每到这个<image>被其他元素引用时盲目检索服务器相同的图像。关于SVG的启示将不胜感激。

我也读过关于http /浏览器缓存的文章，并且得到了浏览器缓存不可靠的印象，因为用户可以手动禁用缓存，并且缓存大小对于大量图像可以设置得太小。此外，高速缓存机制无法消除不必要的往返行为，如前面提到的“上传然后下载图像添加到图库”场景。

顺便说一句，一晃就是我想学习和使用的最后一件事。

最好的问候，

enter code here

来源

2010-10-02 Masao Liu

我不知道，但我想告诉浏览器重用形象的最佳方式就是不要改变它的文件名，也不是文件本身。应该每次使用相同的路径访问它。随后对同一个文件的请求应该导致从浏览器的缓存中获取文件，对吧？达到此目的的方法是使用文件命名算法，为相同的图像/缩略图始终提供同一个名称。如果您上传文件，由于文件名通常不同，因此AFAIK文件不在浏览器缓存中，因此必须下载一次。在我的实践中，浏览器缓存通常是过度热情并缓存太多数据（这导致修改通过AJAX加载的文件时出现问题，缓存应明确禁用以进行测试并启用生产）。您是否使用FireBug和Chrome资源跟踪器测试过您的网站？

顺便说一句，我希望你不要在服务器上呈现更大的图像。这可能是相当无效的，特别是如果经常进行。画布对象为大多数基本的图像处理任务提供了许多快速简单的方法，因此加载的唯一图像应该是之前上传的图像。服务器端应该做的唯一事情就是缩小比例。在客户端直接执行它是不可能的，因为浏览器无法从远程站点访问本地文件。来自该规则的每个例外应该被报告为主要的错误。

{full size user file} - > {server} - > {scaled down} - > {client}似乎是不可避免的。

来源

2010-10-02 19:35:05 Harry

避免从服务器反复重复图像

回答

相关问题