2011-01-20 49 views
0

我将获得大量图像并试图找到最有效的方式来存储这些图像以保持页面的快速。什么是最有效的方式来存储图像? HTML/CSS/JS

到目前为止,我只想到了两种方法:使用javascript加载,例如picture = new Image(); picture.src = "file.jpg";,并根据需要在页面上添加/删除,或加载到<img>并设置display:none

还有其他选择吗?什么被认为是最好的方式来做到这一点?

回答

2

相片库的最佳方式(如果多数民众赞成你正在建设),通常是有图像的多种尺寸,至少有两个:

  1. 一个短小的尺寸是高度压缩的,因此有占用空间小:这是您加载到网格并显示在网页中的图像e多个图像
  2. 压缩程度较低,图像质量较高的较大图像 - 这是您在人们希望查看详细信息时显示的图像。

由于人们经常从那里小/快装版本已经显示一个页面来详细的图像,因此已经在浏览器缓存中,你做一个小动作,并有瞬间的照片,不预加载任何东西。

它是这样的:

在详细信息页显示您在具有较大详细版本尺寸图像标记高度压缩的小图片。然后使用new Image()加载更大的详细版本,并附带onload事件,该事件将图像标记的来源与小型压缩版本更改为大型详细版本。

它看起来很棒,工作速度快,用户会爱你;)

PS:存储图像的最佳方法是在浏览器的缓存,而不是JS或DOM,所以如果你真的想预先载入图像,这通常是一种不好的做法(有时候可能是必要的),让浏览器在后台为你提供一个css文件,引用它们的样式不适用于你网站的可视区域。

0

最好是使用JavaScript,然后根据需要将它添加到DOM,而不是先将它添加到DOM然后隐藏它,因为DOM操作要慢得多,而且您可能会不使用一些图像

1

我不确定“高效”,但最合乎逻辑的方式是不使用JavaScript加载图像(如果您禁用JavaScript,则无法使用)或将图像设置为隐藏显示属性(同样,浏览器可能只是加载图像)。

因此,一个合理的建议是使用枯燥的旧分页和每页显示'n'图像。但是,为了使其更新,您可以使用“lazy”(a.k.a.“deferred”)加载并在用户滚动时通过Ajax加载其他页面内容。然而,这是关键,这缓慢下降到“分页”标准的行为,如果JavaScript被禁用等等

的这种操作最好的例子是谷歌的image search,如果你search here on StackOverflow你看到的可能实现,等等的讨论。

相关问题