假设我有以下 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()
事件感觉很脏。
Lets say I have the following 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>
How can i make it so that the thumbnail is sized the same way as the image? Is there a better way to structure this?
The function of this is to provide a low-quality version of an image while the full-quality version is loading, where the low-quality version has already been loaded (thus progressive jpgs are not helpful). This is used to display a large image when a thumbnail in a gallery is clicked.
Oh, and I know the width and the height of the large image before it has loaded, but I would rather not set an explicit size within the javascript if possible- it should scale when the user resizes the window if possible. Catching the resize()
event just feels dirty.
发布评论
评论(3)
一种古老(但仍然有效)的技术是使用 IMG 标签的 LOWSRC 属性。这曾经在拨号时代使用过,当时下载图像确实需要很长时间。人们将其用于低分辨率+低调色板版本,以快速加载,然后加载完整版本。
An ancient (but still valid) technique is to use the LOWSRC attirbute of the IMG tag. This was once used back in the dial-up days when images did take a long time to download. People used it for low-resolution + low palette versions to load quickly while the full version loaded after.
使用 jQuery,您可以做到
缩略图图像的大小与大图像相同。
eq(0)
引用第一张图像(拇指),eq(1)
引用第二张图像(大图像)。这是假设您在#container
中按此顺序放置它们。另外,您应该为图像使用 class 而不是 id 。也就是说,如果您计划在其他图像上使用相同的 ID 名称。与类不同,id 只能在 HTML 中使用一次,在类中它可以应用于许多 HTML 元素。检查工作示例 http://jsfiddle.net/7j7kJ/
With jQuery you can do
The thumb image will be sized the same as the large image.
eq(0)
is referencing the first image which is the thumb andeq(1)
is referencing the second image which is the large one. This is assuming that you have them in this order inside#container
. Also you should use class instead of id for your images. That is if you are planning to use the same id names on other images. You can only use an id once in your HTML unlike class where it can applied to many number of HTML elements.Check working example http://jsfiddle.net/7j7kJ/
我对问题的最后部分感到有点困惑:如果图像相对于浏览器窗口缩放,则可以对大图像和小图像执行相同的操作;只需使用 css 将高度或宽度设置为 100%(例如)。
您甚至可以使用 javascript 加载大图像,并在加载时让它替换小图像,这样您就可以在初始页面加载后对其进行编程,以确保首先加载小图像。
在 jQuery 中,您可以在加载整个“正常”页面后开始加载大图像,使用:
I´m a bit confused by the last part of the question: if the image is scaled relative to the browser window, you can do the same for the large and the small image; just set the height or the width to 100% (for example) using css.
You can even load the big image using javascript and have it replace the small image when it is loaded, that way you can program it after the initial page-load to insure that your small images get loaded first.
In jQuery, you can start loading the large images when the whole "normal" page has loaded, using: