jquery simple curseur image w/ajax

Question

J'ai une page avec beaucoup d'images, et je veux seulement charger des images supplémentaires sur demande. IE si l'utilisateur clique dessus ou souris dessus, peu importe. La plupart sinon tous les curseurs que j'ai vus utilisent l'attribut caché avec tous les éléments chargés en même temps, ce qui causerait un fardeau excessif dans mon cas.

J'ai aimé: http://nivo.dev7studios.com/ mais il n'a pas une telle fonctionnalité.

Quelqu'un connaît-il un curseur ajax utilisant de préférence jquery?

Merci

Answer 1

je pense que vous pouvez le faire avec Jcarousel: http://sorgalla.com/jcarousel/

L'astuce est de passer les images une par une en javascript, pas en html, sinon, il y a toujours chargé au préalable.

Le code serait:

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

}