是否可以使用无限滚动在内部加载更多页面？

Question

my question is the following ,i have a dynamic page that fetches images from the database for my products. I display 14 products with sub-product images over here : "http://www.14u-fashion.com/shop/cat/65". I want to remove the arrows and made it an infinity scroll , i used this library : "github.com/paulirish/infinite-scroll" , everything works fine (working here "dokimastiko.14u-fashion.com/shop/cat/65") but when i load more content on scroll the javascript that makes the images turn (and the arrows on each product 'clickable') doesn't carry on. My code so far is this

$o . ="$('#catview').infinitescroll({
                   navSelector:'div.nextPage',             
                   nextSelector:'div.nextPage a:first',
                   itemSelector:'#catview div.loadPage',
                   loading: 
                   {
                    finishedMsg: '',
                    msgText: '',
                    img : '/../../../images/loading.gif',
                    },
                    debug:true;
                   animate: true,

   });
   "; 

Any way to make it work with javascript? I tried with pathParse but even more errors occur

Answer 1

make your js code that makes images turn into a function and use the optional callback $(elem).infinitescroll(options,[callback]) to call the function again

Something like this:

function codeForImageTurn(){
    //turn image, click stuff
}

//run once when page load
codeForImageTurn();


//add as callback everytime scroll elements are added so it will re-run
$o. = "$('#catview').infinitescroll({
    navSelector:'div.nextPage',             
    nextSelector:'div.nextPage a:first',
    itemSelector:'#catview div.loadPage',
    loading: 
    {
        finishedMsg: '',
        msgText: '',
        img : '/../../../images/loading.gif', //starting with `/` means root, you can't go anything up
    },
    debug:true;
    animate: true,

},function(){
    codeForImageTurn();
});
";