jQuery / PHP - Lazy loading gallery keeps trying to fetch images even when they've all loaded

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

James Kovacs · Accepted Answer · 2010-11-15 19:13:51Z

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

answered Nov 15, 2010 at 19:13

James Kovacs

11.7k42 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Sam Nabi Over a year ago

That plugin doesn't work in modern browsers. The images all get loaded in the background anyway.

James Kovacs Over a year ago

It looks like modern browsers queue up loading of <img src=''/> URLs as the HTML is parsed. Hence by the time the jQuery Lazy Load plugin executes, the browser is already loading (or preparing to load) them. I resolved the issue in the Lazy Load plugin by requiring lazy-loaded images to specify the URL in an <img original='URL'/>. Update can be found here: github.com/JamesKovacs/jquery_lazyload Even if you choose not to use the Lazy Load plugin, you should study how it accomplishes lazy loading without setTimeout(func, 0) calls.

Sam Nabi Over a year ago

James, do you have a working example of the lazyload plugin using original attributes? I tried to do it but I'm stuck on the loading image: s194239704.onlinehome.us/bookneto/lazyload

James Kovacs Over a year ago

Grab the code from github and drop it on a webserver (locally hosted works fine). github.com/JamesKovacs/jquery_lazyload/archives/master

Sam Nabi Over a year ago

Thanks, that worked. The lazy load plugin has a number of advantages over the code I was trying to use before (despite the non-standard HTML). I voted you up, but I'll leave the question unanswered in case someone finds a solution to the specific problem I was having.

CamelBlues · Accepted Answer · 2010-11-15 23:12:56Z

1

Be careful with the lazyload plugin, it doesn't work properly with webkit.
See Bug 6656 (this bug may also be related to your problem) and the project page for Lazyload

answered Nov 15, 2010 at 23:12

CamelBlues

3,8235 gold badges33 silver badges39 bronze badges

Comments

Paul Sonier · Accepted Answer · 2010-11-15 19:08:05Z

0

Change your comparison operator from <= to <.

answered Nov 15, 2010 at 19:08

Paul Sonier

39.6k3 gold badges81 silver badges118 bronze badges

1 Comment

Sam Nabi Over a year ago

No dice... Firefox just loads the first image and then stops. Chrome, oddly enough, loads between 14 and 20 images all at once, then doesn't go any further than that.

Collectives™ on Stack Overflow

jQuery / PHP - Lazy loading gallery keeps trying to fetch images even when they've all loaded

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related