自定义ajax菜单加载内容（图像）

Question

我正在尝试创建一个带有列表项的页面，如果你点击其中一项，你将会看到对应的图片。(每个列表项都有不同的图片)

图片很大，所以我觉得最好的方式是只有在调用(按下列表项)时才加载它们（ajax?!）(就像你在gif示例中看到的那样)。

这基本上就像一个ajax菜单，如果你按下菜单项，旧内容会滑出，新内容会滑入。

列表将很大(约30项)。

我该如何创建这种ajax菜单？

请问有人可以告诉我最好的方法吗？

- Kaspars Milbergs

---

你是如何制作这个GIF的？用什么软件？太棒了！ - Royi Namir

哈哈哈 - 我真傻 - 但我认为这对于如此小的功能来说太大了，我用不了。 - Royi Namir

Answer 1

我认为你需要：类似于这样的东西 [Data_URI_scheme]

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUA
AAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO
9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

http://en.wikipedia.org/wiki/Data_URI_scheme

这样做 - 你将在文档中拥有图片。但页面加载速度会变慢，但是当它完成加载时，所有图片都已经显示出来。

另一种方法：是预加载图片 - 这样你就不会遇到延迟的问题了。

图片不应该太大。- 它们的大小应该优化为网页显示。

如果你想使你的动画流畅 - 你必须预加载第一张图片 - 但是你不知道什么是第一张图片!! -

$.preloadImages = function()
{
  for(var i = 0; i<arguments.length; i++)
  {
    jQuery("<img />", {style:'display:none'}).attr("src", arguments[i]);
  }
}

$.preloadImages("img2_thumb.jpg", "img1_thumb.jpg",
"img3_thumb.jpg");

- Royi Namir

---

好的，它将预加载图像。但是这个列表项怎么办，我如何定位特定的图像并显示它？ - Kaspars Milbergs

这行代码：jQuery("<img />", {style:'display:none'}).attr("src", arguments[i]); 将通过 get 连接下载图像，因此它们现在在您的浏览器缓存中。所以现在您可以引用原始图像位置（相同的图像名称!!），它将从缓存中获取。（除非响应中有一个“无缓存”头。） - Royi Namir

Answer 2

var img = document.createElement('img')
img.scr = 'http://...'
document.body.appendChild(img)

这将动态加载图像

- kecske