1

可以说我有以下html：

<div id="container">
    <img id="large-image" src="/img/large-image.jpg" />
    <img id="large-image-thumb" src="/img/large-image-thumb.jpg" />
</div>

我怎样才能使缩略图的大小与图像的大小相同？有没有更好的方法来构建它？

其功能是在加载完整质量版本时提供图像的低质量版本，其中已经加载了低质量版本（因此渐进式 jpg 没有帮助）。这用于在单击图库中的缩略图时显示大图像。

哦，我知道大图像在加载之前的宽度和高度，但如果可能的话，我宁愿不在 javascript 中设置显式大小 - 如果可能，它应该在用户调整窗口大小时缩放。赶上这个resize()事件只是感觉很脏。

4

3 回答 3

1

一种古老（但仍然有效）的技术是使用 IMG 标签的LOWSRC属性。这曾经在拨号时代使用过，当时图像确实需要很长时间才能下载。人们将它用于低分辨率 + 低调色板版本以快速加载，而完整版则在之后加载。

<img src="... big image ..." lowsrc="... same size but small file image ..." />
于 2011-04-08T22:02:07.930 回答
0

使用 jQuery 你可以做到

var largew = $('#container').find('img').eq(1).width(),
    largeh = $('#container').find('img').eq(1).height();
$('#container').find('img').eq(0).css({
    height: largeh,
    width: largew
});

拇指图像的大小将与大图像相同。eq(0)正在引用第一个图像，即拇指图像，并eq(1)引用第二个图像，即大图像。这是假设您将它们按此顺序放在里面#container。此外，您应该为图像使用 class 而不是 id。也就是说，如果您打算在其他图像上使用相同的 id 名称。您只能在 HTML 中使用一次 id，这与可以应用于许多 HTML 元素的类不同。

检查工作示例http://jsfiddle.net/7j7kJ/

于 2011-04-08T22:22:53.423 回答
0

我对问题的最后一部分有点困惑：如果图像相对于浏览器窗口缩放，则可以对大图像和小图像执行相同的操作；只需使用 css 将高度或宽度设置为 100%（例如）。

您甚至可以使用 javascript 加载大图像并让它在加载时替换小图像，这样您就可以在初始页面加载后对其进行编程，以确保您的小图像首先被加载。

在 jQuery 中，您可以在加载整个“正常”页面时开始加载大图像，使用：

$(window).load(function() {
    large_image = new Image();
    large_image.src = "/img/large-image.jpg";
    // etc.

    // replace the source of the small image with the big image
    // you will need some additional code to check for the load event of the large images
});
于 2011-04-08T22:29:06.033 回答