isotope jquery avec défilement infini et de l'image préchargement

Question

J'utilise un isotope jquery et défilement infini et que vous voulez utiliser une image préchargement

Le préchargement d'image J'utilise est la suivante: Image preloader

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

Il fonctionne parfaitement sur la première page, mais ne tourne pas pour les éléments à défilement infini, donc je dois placer cela quelque part dans le rappel isotope, mais où? Des idées?

Ceci est du code de rappel isotopique J'utilise:

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

Answer 1

Il est une propriété loading en isotope similaire que vous besoins, mais seulement pour l'ensemble de la page suivante, pas un élément img spécifique:

$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)); 
    } 
); 

vous pouvez peut-être essayer d'appeler le préchargement avec quelque chose comme ceci:

// 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 
    }); 
} 

Answer 2

Walter Jr était proche, mais j'avais déjà essayé ça. La clé est l'ordre du code, le code de préchargement doit venir avant que les nouveaux éléments sont chargés, donc:

function(newElements) { 

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

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