jQuery Image fadeIn Upon Scroll Inside DIV

I can't get the actually LazyLoad plugin to work for me so I am trying to write my own with. Currently I have a list of images loading inside of a DIV. They are pulled by a PHP query to the mysql database. The DIV scroll is set to auto. The code I am 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 is not quite working for me. Could anyone help me out or shoot out some suggestions?

---

A couple of things:

• As the others have already said, your code has syntax errors - both with the PHP and the Javascript.
• If you use display: none, the elements will not take up any height, thus causing the entire thing to become unscrollable and fail.
• The first few elements should be visible without the user having to start scrolling

Taking these into consideration, we can try writing this this way:

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

See a demo of this here: http://jsfiddle.net/yijiang/eXSXm/2

---

If all of the images are hidden, then there will never be a 'scroll' even called as the element will never scroll.

What exactly are you trying to achieve? If it is to have new images that weren't previously visible, but now may be, become visible then you will have to do something like;

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

Note that I haven't tested the above, and I can imagine that it will result in all images being shown immediately, since all of their 'top's will be 0 due to them all being hidden and not having their position effected by previous images in the DOM.

Edit

I've changed the code above so the img's have visibility:hidden, which should give them a height and take up space in the DOM

---

I've been testing it, it seems to work with some modifications:

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

Some things I had to change:

• I added the closing } for the imgCheck() function, you forgot it
• Some items need to be visible from the beginning on, otherwise the scrollbar never appears and imgCheck() is never called.

---

OK the problem with the above was that the images don't fade in separately upon scroll. I got it to work though with some modifications:

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

What I changed:

• I changed the display: none to opacity: 0 so that any invisible picture has at least an empty placeholder of the same size, so that the scroll bar will be visible.
• I then fade in using animate to opacity: 1
• I used jQuery each() to iterate over the images and check for each of them if they should or should not be faded in (instead of checking for all, like before).
• I wrapped the images in DIV's. I don't think it's necessary, but it doesn't harm either.
• I tagged each image with an id, so that I can single them out for the fadein.

There are still some esthetic issues but this should help you on your way.