有关<img/>和缩略图的问题

Question

我有一个照片网站，当我悬停一些点时，它会在标签中呈现我的照片预览。 （见http://johanberntsson.se/photo/）。

但是将完整图像加载到img-tag中感觉有点蠢。因为据我所知，将图像加载到原始大小与添加高度和宽度属性之间没有区别。

有什么建议改进我的预览功能吗？

由于

Answer 1

就客户方而言，你无能为力。如果您担心图片加载需要多长时间，您可以随时使用javascript预加载它们。唯一的另一件事是在服务器上创建一些尺寸的图像。

Answer 2

您应该调整图像大小以获得更好的速度。这是php中的一个例子

//Blob if image in database
$blob = mysql_fetch_...();
//else blob point to filename
$blob = "filename.jpg";

   $gd = imagecreatefromstring($blob);
   $resized = imagecreatetruecolor(X, Y); // new image dimensions
   imagecopyresampled(....);


   imagejpeg($resized);
 

Answer 3

将所有缩略图加载到用作背景图像的巨型精灵图像中。然后将背景放在正确的位置，以使正确的图像成为正确的位置。

这样可以通过仅加载1张图片来提高加载速度，并允许浏览器缓存图像请求，这样，下次用户访问您的网站时，它的加载速度会非常快。