JQuery Image fadeIn After Scrolling Inside a DIV

Question

I can't get the LazyLoad plugin to work for me, so I'm trying to write my own. I currently have a list of downloadable images inside a DIV. They are pulled by a PHP query into the mysql database. DIV scrolling is set to auto. The code I'm using is:

<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>

Although this does not work for me. Can someone help me or shoot some suggestions?

Answer 1

Few things:

• As others have said, your code has syntax errors - with both PHP and Javascript.
• display: none, - , , .
• .

, :

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

// Insert 20 img - 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 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');

. : http://jsfiddle.net/yijiang/eXSXm/2

Answer 2

, , .

? , , , - :

<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>

, , , , , " 0 - , , DOM.

Edit

, img : , DOM

Answer 3

, , , :

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

, :

• } imgCheck(),
• , , imgCheck() .

---

, . , :

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

:

• display: none opacity: 0 , , .
• opacity: 1
• jQuery each() , ( , ).
• DIV. , , .
• id, fadein.

There are some more aesthetic issues, but this should help you on your journey.