jquery isotope with infinite scroll and image prel

问题:

I'm using jquery isotope and infinite scroll and want to use an image preloader

The image preloader I'm using is this: Image preloader

$('.image').preloader({
    loader: '/images_/icons/img_pre.gif',
    fadeIn: 700,
    delay : 200 
    });

It works perfectly on page one but then doesn't fire for the infinite scrolled items so I need to place this somewhere within the isotope callback, but where? Any ideas?

This is isotope callback code I use:

// call Isotope as a callback
function( newElements ) {
    $container.isotope( 'insert', $( newElements ) ); 
    $container.isotope({ filter: '*' });
}

回答1:

Walter Jr was close, but I'd already tried that. They key is order of the code, the preloader code has to come BEFORE the new elements are loaded, so:

function( newElements ) {

$('.image').preloader({
    loader: '/images_/icons/img_pre.gif',
    fadeIn: 700,
    delay : 200 
});

$container.isotope( 'insert', $( newElements ) ); 
$container.isotope({ filter: '*' });
}

回答2:

There is a loading property in isotope that is similar that you needs, but only for the entire next page, not an specific img element:

$container.infinitescroll({
    navSelector  : '#page_nav',    // selector for the paged navigation 
    nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
    itemSelector : '.element',     // selector for all items you'll retrieve
    loading: {
        finishedMsg: 'No more pages to load.',
        img: 'http://i.imgur.com/qkKy8.gif'
      }
    },
    // call Isotope as a callback
    function( newElements ) {
      $container.isotope( 'appended', $( newElements ) ); 
    }
  );

Perhaps you can try calling the preloader with something like this:

// call Isotope as a callback
function( newElements ) {
    $container.isotope( 'insert', $( newElements ) ); 
    $container.isotope({ filter: '*' });

    $('.image').preloader({
        loader: '/images_/icons/img_pre.gif',
        fadeIn: 700,
        delay : 200 
    });
}