Question

I’ve got an image gallery that is showing one image per row inside of a div. I don’t want the next image to load until it reaches the edge of the viewport (to save on server resources). All the images are named sequentially in the same folder (img/1.jpeg, img/2.jpeg, img/3.jpeg, …).

I’m using a modified jQuery plugin to do this, but it still keeps trying to fetch the next image after all the images in the directory have been loaded. It’s the last if statement I’m having trouble with here.

How do I stop the function from running once the last image in the directory has loaded?

<?php 
// Count total number of images in the directory
$directory = "img/";
$totalImages = count(glob("" . $directory . "*.jpeg"));
?>

<script type="text/javascript">
$('document').ready(function(){
    scrollalert();
});
function scrollalert(){
    var scrolltop=$('#scrollbox').attr('scrollTop');
    var scrollheight=$('#scrollbox').attr('scrollHeight');
    var windowheight=$('#scrollbox').attr('clientHeight');
    if(scrolltop>=(scrollheight-(windowheight)))
    {
        // Fetch next image
        var nextImgNum=$('#content img').length + 1;
        $('#content').append('<img src=\"book1/'+nextImgNum+'.jpeg\" /><br />');
        updatestatus();
    }

    if(nextImgNum<=<?php echo $totalImages ?>)
    {
        setTimeout('scrollalert();', 0); 
    }
}

</script>

Any tips to optimize this script are greatly appreciated too 🙂

Answer 1

That script is highly inefficient and keeps the browser quite busy. You’re basically in a tight loop checking whether the user has scrolled the page and avoiding the browser’s script timeout via the use of setTimeout(). This is not something I would recommend. You can definitely fix this issue, but why not use the jQuery Lazy Load plug-in?

http://plugins.jquery.com/project/lazyload