jquery - 带有缩略图的图片库,具有准备加载的全尺寸图片 URL

标签 jquery html css

我有一个包含大量缩略图的照片库。

<img src="/images/33113_thumb.jpg" class="thumb" />
<img src="/images/1233_thumb.jpg" class="thumb" />
<img src="/images/99513_thumb.jpg" class="thumb" />

我想做的是使用 jQuery,以便当用户点击图片时,我可以将全尺寸图片加载到 View 中。

问题是我不知道在哪里可以存储我要加载的图像的全尺寸 URL。我想让它可用,而不是要求服务器,因为这会影响性能。

有什么建议可以为上面的缩略图存储替代的全尺寸 URL 吗?有什么技巧吗?

谢谢

最佳答案

如果您使用 HTML5 DocType,您可以将自定义数据属性添加到您的标记中。

例如:

<img src="/img/thumb.jpg" data-altsrc="/img/fullsize.jpg">

JQuery 可以使用 .attr('data-altsrc') 来获取值。

在 pagoda.com 上,一种类似的方法被用于存储替代图像“rollover”的 URL。它仍然可以在没有 HTML5 DocType 的情况下工作。如果您尝试验证标记,“无效”属性将被标记。

关于jquery - 带有缩略图的图片库,具有准备加载的全尺寸图片 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4094092/

相关文章:

javascript - 下拉菜单被 div 隐藏并自动溢出

对比填充和空白背景的 CSS 进度条文本颜色?

javascript - HTML 响应式 css 不适用于随机图像

javascript - 全日历更改提示而不是弹出窗口

html - Webkit @font-face 渲染问题 - 一些元素不使用字体

html - 为什么这些固定位置的 DIV 不按文档流的顺序显示?

html - 为什么只是将 css 样式复制为新样式并引用新样式会导致图像不显示

javascript - 要求输入在数据列表中

javascript - ajax关闭一次后不会重新打开

html - 将背景设置为 100% 高度并将页脚保持在页面底部