Infinite ajax scroll

Bonjour, j'essaie de mettre en place une galerie de .gif animés sur un site perso en cours de finition.

J'ai opté pour infinite ajax scroll pour le chargement automatique des images depuis une base de données MySQL.

J'utilise également gifPauseXtrem pour stopper la lecture du gif au chargment, c'est l'utilisation conjointe de ces deux outils qui ne fonctionne pas. gifPauseXtrem n'est plus reconnu sur les images chargées par Ajax (soit dès la page 2).

ici le code php pour l'infinite scroll :

<?php
include('config.php');
$page = (int) (!isset($_GET['p'])) ? 1 : $_GET['p'];
# sql query
$sql = "SELECT id, mygif FROM travaux ORDER BY id DESC";
# find out query stat point
$start = ($page * $limit) - $limit;
# query for page navigation
if( mysql_num_rows(mysql_query($sql)) > ($page * $limit) ){
	$next = ++$page;
}
$query = mysql_query( $sql . " LIMIT {$start}, {$limit}");
if (mysql_num_rows($query) < 1) {
	header('HTTP/1.0 404 Not Found');
	echo 'Page not found!';
	exit();
}
?>

le html :

<div class="fafa">
	<!-- loop row data -->
    <?php while ($row = mysql_fetch_array($query)): ?>   
<?php $tableau_vignettes = explode("|",trim($row['mygif']));
for ($i = 0; $i < count($tableau_vignettes); $i++) {
  if (!empty($tableau_vignettes[$i])) {
  ?>
  <div class="vignette">
      <div class="inner">
        <img src="galeries/gif/<?php echo $tableau_vignettes[$i]; ?>"  />
     </div>    
   </div>
<?php
  }
}
?>
	<?php endwhile?>
	<!--page navigation-->
	<?php if (isset($next)): ?>
	<div class="nav"><a href='undo-redo.php?p=<?php echo $next?>'>Next</a></div>
	<?php endif?>
</div><!--fafa-->

le javascript de l'infinite scroll :

<script type="text/javascript" src="js/jquery-ias.min.js"></script>
<script type="text/javascript">
        $(document).ready(function() {
        	// Infinite Ajax Scroll configuration
            jQuery.ias({
                container : '.fafa', // main container where data goes to append
                item: '.vignette', // single items
                pagination: '.nav', // page navigation
                next: '.nav a', // next page selector
                loader: '<img src="css/img/ajax-loader.gif"/>', // loading gif
				history : false,
				
                triggerPageThreshold: 2 // show load more if scroll more than this
            });
        });
</script>

et enfin, le javascript de GifPauseXtrem :

<script>
  $(document).gifPauserXtreme();
</script>

pourriez-vous m'apporter une solution ? par avance, merci.
Modifié par stoffkrii (29 Sep 2014 - 17:01)