自定义 ajax 菜单加载内容（图片）答案

【问题标题】：Custom ajax menu load content (image)自定义 ajax 菜单加载内容（图片）
【发布时间】：2011-11-22 11:13:51
【问题描述】：

我正在尝试创建一个包含列表项的页面，如果您单击其中一项，您基本上会看到该图像。（每个列表项都有不同的图像）

图像会非常大，所以我认为最好的方法是仅在调用项目（按下列表项）时加载（ajax？！）它们（如您在我的 gif 示例中所见）。

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

列表会很大（大约 30 项）。

如何创建这种 ajax 菜单？

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

【问题讨论】：

你是如何创建 gif 的？什么软件？不错！
hhhhh - 我真傻 - 但我认为它太大了，我无法将它用于这么小的功能

标签： javascript jquery ajax load

【解决方案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");

【讨论】：

好的，它会预加载图像。但是这个列表项怎么样，我如何定位特定的图像并显示它？
这一行：jQuery("<img />", {style:'display:none'}).attr("src", arguments[i]); 将通过get 连接以下载图像，以便它们现在位于您的浏览器缓存中。所以现在您可以参考原始图像位置（相同的图像名称！！），它将从缓存中获取它。（除非响应中有标头 - no cache。）

【解决方案2】：

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

这将动态加载图像

【讨论】：