How to avoid pre-loading images when using jQuery Cycle Plugin

I have a slideshow (jQuery Cycle) with large images, and would like to AVOID pre-loading all the images when the page loads.

Instead, I'd 开发者_如何学Clike to only load the first image, and have the rest load after the user CLICKS on it.

I'd really appreciate any ideas! Javascript newbie here... Thanks so much!!!!!

---

So the best solution i found was here: http://tinyurl.com/24o2stc Using the "before" option from jQuery Cycle, it only loads the first 2 slides, and adds the next one as you keep clicking thru the slideshow.

---

I don't know if this will help you, but the concept is to load the images in javascript, not in HTML because you could not prevent loading everything if it is in HTML.

Look at my answer to this question:

jquery simple image slider w/ajax

"I think you can do that with jcarousel:

http://sorgalla.com/jcarousel/

The trick is to pass the images one by one in javascript, not in html, if not, they are always loaded beforehand.

The code would be:

var mycarousel_itemList = [
{url:"/im/a.jpg", title: ""},{url:"/im/b.jpg", title: ""}];

listaimg=document.createElement('ul');
jQuery(listaimg).attr('id','mycarousel');
jQuery(listaimg).addClass('jcarousel-skin-tango');
jQuery('#containercarousel').append(listaimg);
jQuery('#mycarousel').jcarousel({   auto: 9,wrap: 'last', visible: 1,scroll:1, size: mycarousel_itemList.length,
    itemLoadCallback: {onBeforeAnimation: mycarousel_itemLoadCallback}

   });


function mycarousel_itemLoadCallback(carousel,state){for(var i=carousel.first;i<=carousel.last;i++){if(carousel.has(i)){continue}if(i>mycarousel_itemList.length){break};

carousel.add(i,mycarousel_getItemHTML(mycarousel_itemList[i-1]));


  }
};
function mycarousel_getItemHTML(item)
{


  var img = new Image();
                 $J(img).load(function () {

// whatever you want to do while loading.
    }).attr('src', item.url);
 return "<li><img src=\"" + item.url + "\" width=\"770\" alt=\"\" /></li>";

}

"