Пользовательское меню загрузки содержимого ajax (изображение)

Question

Я пытаюсь создать страницу с элементами списка, и если вы нажмете на один из элементов, вы в основном увидите изображение. (каждый элемент списка имеет разное изображение)

Изображения будут довольно большими, поэтому я думаю, что лучший способ - загружать их (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)

это загрузит изображение динамически