Geek Answers Handbook

Custom ajax menu download content (image)

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 item in the list is distinguished by an image)

The images will be quite large, so I think the best way is to load (ajax ?!) them only when the element is called (the list element is pressed) (as you can see in my gif example).

It basically looks like an ajax menu, if you click on a menu item, the old content will pop up and the new content will come in.

The list will be large (about 30 items).

How to create this kind of ajax menu?

Can someone please tell me the best way to do this?

Action which I need

+5
2

, : - [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

- . - - pic .

: preLoad - wont delay.

. - -.

, - , , ! -

$.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");
+1
var img = document.createElement('img')
img.scr = 'http://...'
document.body.appendChild(img)

0

More articles:


All Articles