ansaurus

Question

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

Answer 1

A:

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:

http://stackoverflow.com/questions/3949913/jquery-simple-image-slider-w-ajax/3949945#3949945

"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, there 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>";

}

"

netadictos 2010-10-29 09:04:32

thanks for the suggestion netadictos! But just to keep it simpler (not have to add jcarousel too), could I achieve this by using that "before" option in jquery Cycle I mentioned above? Do you know how I could bind it to a click on the first image? Thanks!

Guilherme 2010-10-29 19:47:05

@Guilherme - not at all, you can always upvote, nevertheless, I have verified the before option with firebug in network tab, and all the images are preloaded. Could you look at it pls and report?

netadictos 2010-10-29 19:59:41

@netadictos - I played around with the "before" option from the jQuery Cycle plugin, and it works. I confirmed it with firebug!It seems cleaner this way so I dont have to call for another plugin. Thanks!

Guilherme 2010-10-29 23:42:23

@Guilherme - I have retested it and it's true they are not preloaded, the only thing imperative is to have 2 slides in the HTML. My solution has the advantage that you can insert a spinning symbol in case it has not loaded when the slide appears, with the before solution sometimes the slides are empty because they have not preloaded. That said, I upvote your answer.

netadictos 2010-10-30 09:06:34

Answer 2

+1 A:

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.

Guilherme 2010-10-29 23:46:35

ansaurus

tags:

views:

answers:

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

related questions