jQuery Image fadeIn lors du défilement à l'intérieur DIV

Question

Je ne peux pas obtenir le plugin réellement LazyLoad à travailler pour moi, donc j'essaie d'écrire le mien avec. Actuellement, j'ai une liste d'images qui se chargent dans un DIV. Ils sont tirés par une requête PHP vers la base de données mysql. Le défilement DIV est défini sur auto. Le code que j'utilise est:

<div id="b1" style="overflow:auto;"> 
<?PHP $result = mysql_query("SELECT * FROM images"); 

while($row = mysql_fetch_assoc($result)) { 

echo "<img src='$row[photo]' style='display:none'> <br>"; 

} 

</div> 

<script type="text/javascript"> 
function imgCheck() { 
var position  = $("img").offset().top;    
var scrollCheck  = $("#b1").scrollTop() + $("#b1").height(); 
if (scrollCheck > position) { 
    $("img").fadeIn("fast"); 
    } 


$("#b1").scroll(function() { imgCheck() }); 
</script> 

Bien que cela ne fonctionne pas tout à fait pour moi. Quelqu'un pourrait-il m'aider ou tirer quelques suggestions?

Answer 1

Quelques choses:

• Comme les autres ont déjà dit, votre code contient des erreurs de syntaxe - à la fois avec le PHP et le Javascript.
• Si vous utilisez display: none, les éléments ne prendront aucune hauteur, provoquant ainsi l'ensemble de l'objet à devenir incrustable et échouer.
• Les premiers éléments doivent être visibles sans que l'utilisateur ait à commencer le défilement

Leur prise en considération, nous pouvons essayer d'écrire cette façon suivante:

// Cache the containing element and it's height 
var b1 = $('#b1'), 
    h = b1.height(); 

// Insert 20 img's - simulating server-side code 
for(var i = 0; i < 20; i++){ 
    $('<img />', { 
     src: 'http://placehold.it/100x100', 
     alt: '', 
     class: 'hidden', 
     width: 100, 
     height: 100 
     // visibility: hidden to retain it's size 
    }).css('visibility', 'hidden').appendTo(b1); 
} 

b1.scroll(function(){ 
    // Loop through only hidden images 
    $('img.hidden').each(function(){ 
     // $(this).position().top calculates the offset to the parent 
     // So scrolling is already taken care of here 
     if(h > $(this).position().top){ 
      // Remove class, set visibility back to visible, 
      // then hide and fade in image 
      $(this).css('visibility', 'visible') 
       .hide() 
       .removeClass('hidden') 
       .fadeIn(300); 
     } else { 
      // No need to check the rest - everything below this image 
      // will always evaluate to false - so we exit out of the each loop 
      return false; 
     } 
    }); 
    // Trigger once to show the first few images 
}).trigger('scroll'); 

Voir une démonstration de cette ici : http://jsfiddle.net/yijiang/eXSXm/2

Answer 2

Si toutes les images sont cachées, il n'y aura jamais de 'scroll' même si l'élément ne défilera jamais.

Qu'essayez-vous exactement d'accomplir? Si c'est pour avoir de nouvelles images qui n'étaient pas visibles auparavant, mais qui peuvent maintenant être visibles, alors vous devrez faire quelque chose comme;

<div id="b1" style="overflow:auto;"> 
<?php $result = mysql_query("SELECT * FROM images"); 

while($row = mysql_fetch_assoc($result)) { 
    echo "<img src='$row[photo]' style='visibility:hidden'> <br>"; 
} ?> 

</div> 

<script type="text/javascript"> 

function imgCheck() { 
    var scrollCheck = $("#b1").scrollTop() + $("#b1").height(); 

    $("#b1 img").each(function() { 
     var position = $(this).offset().top;    
     if (scrollCheck > position) { 
      $(this).fadeIn("fast"); 
     } 
    }); 
} 

$(document).ready(imgCheck); 

$("#b1").scroll(imgCheck); 
</script> 

Notez que je ne l'ai pas testé ci-dessus, et je peux imaginer que cela se traduira par toutes les images étant montré immédiatement, puisque tous leur « top de sera 0 en raison de tous étant caché et ne pas avoir leur position effectuée par les images précédentes dans le DOM.

Modifier

J'ai changé le code ci-dessus afin de l'img avoir visibility: hidden, ce qui devrait leur donner une hauteur et prendre place dans les DOM

Answer 3

J'ai été le tester, il semble fonctionner avec quelques modifications:

http://jsfiddle.net/antiflu/zEHtu/

certaines choses que je devais changer:

• j'ai ajouté la fermeture } pour la fonction imgCheck(), vous l'avez oublié
• Certains éléments doivent être visibles depuis le début, sinon on n'a jamais appelé la barre de défilement n'apparaît et imgCheck().

---

OK le problème avec ce qui précède est que les images ne se décolorent pas séparément sur parchemin. J'ai eu à travailler bien avec quelques modifications:

http://jsfiddle.net/antiflu/GdzmQ/

Ce que je changé:

• J'ai changé le display: none à opacity: 0 de sorte que toute image invisible a au moins un espace réservé vide de la même taille , de sorte que la barre de défilement sera visible.
• Je fondu puis à l'aide animate-opacity: 1
• je jQuery each() itérer sur les images et vérifier pour chacun d'eux si elles doivent ou ne doivent pas être altérées en (au lieu de vérifier pour tous, comme avant).
• J'ai enveloppé les images dans DIV. Je ne pense pas que ce soit nécessaire, mais cela ne nuit pas non plus.
• J'ai étiqueté chaque image avec un id, de sorte que je puisse les distinguer pour le fadein.

Il existe encore quelques problèmes esthétiques mais cela devrait vous aider sur votre chemin.