自定义ajax菜单加载内容(图像)

Question

我正在尝试创建一个包含列表项的页面,如果您单击其中一个项目,您将基本上看到该图像.(每个列表项都有不同的图像)

图像会很大,所以我认为最好的方法是只在调用item(按下列表项)时加载(ajax ?!)它们(正如你在我的gif示例中看到的那样).

它基本上就像一个ajax菜单,如果按菜单项,旧内容将滑出,新内容将滑入.

列表将很大(约30项).

我怎样才能创建这种ajax菜单？

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

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");