Custom ajax menu load content (image)

Question

I am trying to create a page with list items and if you click on one of the items you will basically see the image. (each list item have differed image)

Images will be pretty big, so I think the best way is to load (ajax?!) them only when item is called (list item is pressed)(as you can see in my gif example).

It is basically like a ajax menu, if you press the menu item, old content will slide out and the new content will slide in.

List will be big (around 30 items).

How can I create this kind a ajax menu ?

Could someone please tell the best way to do this?

Answer 1

I think you need : something like this [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

this way - youll have the picture in the document. but the page will load slower - but when it done loading - youll have all the pic already there.

another way : is to preLoad the images - so you wont have delay problems.

the picture should'nt be so big. - and their size should be optimized for web display.

If you want your animation to be smooth - you have to preload the first image - but you DONT KNOW what is the first image !! -

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