我是网页设计的新手。如果我的理解错误,请纠正我。我正在寻求建议,以避免在以下情况下浏览器和服务器之间的往返。避免从服务器反复重复图像
想象的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 /浏览器缓存的文章,并且得到了浏览器缓存不可靠的印象,因为用户可以手动禁用缓存,并且缓存大小对于大量图像可以设置得太小。此外,高速缓存机制无法消除不必要的往返行为,如前面提到的“上传然后下载图像添加到图库”场景。
顺便说一句,一晃就是我想学习和使用的最后一件事。
最好的问候,
CN
enter code here