自定义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

用这种方式 - 你将在文件中有图片。但是页面加载速度会变慢 - 但是当它加载完毕时 - 你已经拥有了所有的图片。

另一种方式： preLoad 图片 - 因此不会 延迟问题。

这张照片应该不会那么大。 - 并且应针对网页显示优化其尺寸。

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

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

Answer 2

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

这将动态加载图像