Lazy thumbnail loading

[GoogleCodeExporter]

I like that you can add pictures to the list. However, I want to be able to
add whole pages of thumbnails to the list and not change the page
numbering, to effectively have a lazy thumb loader.

I am working on a gallery with thousands of images (loaded dynamically via
PHP/Javascript), which is slow to load.

Is there currently a way to make it so the thumb HTML is only generated
when that page of results is visited? For example, lets say there are 10
"pages" of results. When page 2 is clicked, page 1 with have all its thumbs
removed from the HTML and then page 2 will have HTML generated.

Original issue reported on code.google.com by jonojugg...@gmail.com on 11 Dec 2009 at 9:34

[GoogleCodeExporter]

This could actually be done fairly easily with the current version.

The thumbnails container doesn't actually have to contain "thumbnails" (see
http://www.twospy.com/galleriffic/example-1.html for an example of what I am 
talking
about).  So you could build each "thumbnail" like such:

<li>
    <a class="thumb" href="http://url/of/slide/image" title="Title
#0">http://url/of/thumbnail/image</a>
</li>

You would then need to specify a custom "Page Transition In" handler like such:

var gallery = $('#thumbs').galleriffic({
    ...,
    onPageTransitionIn:        function() {
        var pageIndex = this.displayedPage;
        var thumbIndex = pageIndex*this.numThumbs;
        var ulThumbs = this.find('ul.thumbs');

        for (var i = thumbIndex; i < thumbIndex+this.numThumbs; i++) {
            var aThumb = ulThumbs.children().eq(thumbIndex).find('a:first');

            // Check if we have already built the thumbnail image
            if (aThumb.find('img').length > 0) continue;

            // Get the url for the thumbnail image from the contents of the link
            var thumbSrc = aThumb.text();

            // Now clear the text url and build the actual thumbnail image
            aThumb.empty().html('<img src="'+thumbSrc+'"
alt="'+aThumb.attr('title')+'" />');
        }

        this.fadeTo('fast', 1.0);
    }
});

I haven't tested this, so you may need to tweakit a bit, but this should at 
least
point you in the right direction.

Original comment by trentfoley on 11 Dec 2009 at 10:33

• Changed state: Done
• Added labels: Type-Other
• Removed labels: Type-Defect

[GoogleCodeExporter]

Thanks for getting back so quickly. Sorry. I am kind of shooting in the dark 
since
the script is basically freezing and I am not sure what part exactly is causing 
it.

I think I should rephrase my question. I believe the problem is not the 
thumbnails,
but the shear amount of results. Even if I take the thumbnails out, and create 
a list
with only image titles this is still a problem.

Your example above seems to work on a list of already created results by adding
thumbnails to them when each page loads. While I would rather build the thumb 
list
page by page.

So they would still see a list of pages. But the list would actually only be
populated one section at a time.

Original comment by jonojugg...@gmail.com on 12 Dec 2009 at 3:16

[GoogleCodeExporter]

Did anyone manage to solve this? My client is getting angry :)

Original comment by pauldcol...@gmail.com on 25 May 2010 at 6:24

[GoogleCodeExporter]

I am having the same problem. I have sections that use the plugin with 4 or 5 
pages
of images to scroll through. 

The thumbnails are really slow to load and sometimes it just stops loading 
halfway
through. Is this because it tries to load all 4 pages of images at once, or is 
it a
problem with the script? 

I'm about to upgrade servers for this, but maybe it is a problem with the 
script and
not the server?

Thanks

Original comment by pauldcol...@gmail.com on 25 May 2010 at 6:41

[GoogleCodeExporter]

Though I did not find a solution to this, I am curious where your images stop
loading. Do they simply not appear on the page or does the script hang in the
browser? I would be very surprised if this were an issue with your server.

Original comment by jonojugg...@gmail.com on 25 May 2010 at 6:54

[GoogleCodeExporter]

Hi there

It seems like the script just hangs in the browser, as in it tells me the page 
hasn't
loaded. I would like to send an example, but the site is still in development. 

It doesn't seem to let me click on any until it's finished loading either. I was
guessing it was to do with so many images being loaded at once, hence the server
helping out. 

Not sure what to do now :)

Original comment by pauldcol...@gmail.com on 25 May 2010 at 7:05

[GoogleCodeExporter]

If the script is hanging, it is a client side problem. So dont upgrade your 
server.
Yes, this sounds like the problem I was having. However you only speak of 5 
pages. I
was starting to have the problem at thousands of images I believe.

I do not have a workaround, because I realized the workaround would be quite a 
bit of
coding. I think you would need to write a server side script that would only 
send
parts of the image list at a time. Then you need to modify the javascript to 
handle
these "ghost pages" which are essentially pages of images that contain nothing 
until
it is viewed. This is what I mean by lazy loading above.

So, the author was right about there needing to be some code modifications. 
This will
not work as is. I will keep you posted if I ever get around to writing this
modification, but I will probably write something from scratch first.

Galleriffic works and looks great for smaller galleries though.

Original comment by jonojugg...@gmail.com on 25 May 2010 at 7:16

[GoogleCodeExporter]

Thanks for your comments Jonojuggles

I think it happens for me even with 40 images...

I guess I'll have to find an alternative script. Can you tell me if you found 
another
script that works? There's a lot out there, but none seem to do quite the same 
thing.

Thanks again

Original comment by pauldcol...@gmail.com on 26 May 2010 at 7:42

[GoogleCodeExporter]

Just an update. I've run the site on my localhost and the load is fine - it 
never breaks.

Obviously on the internet it will never load this quick, but I'm going to try 
it on
the new server and see how it goes.

Will report back

Original comment by pauldcol...@gmail.com on 27 May 2010 at 2:02

[GoogleCodeExporter]

btw: the code above works great for lazy loading. There ist just one little 
bug. The line:

var aThumb = ulThumbs.children().eq(thumbIndex).find('a:first');

should be:

var aThumb = ulThumbs.children().eq(i).find('a:first')

Original comment by koeni...@gmail.com on 3 Aug 2010 at 4:17

[GoogleCodeExporter]

I'm guessing that nothing ever came of this? I'm also experiencing a problem 
with a gallery that contains 485 images. I've not pared this down to figure out 
where exactly the cutoff would be for a quick load, but I'm stuck now trying to 
figure out a way to deal with this. :(

Original comment by chris.s....@gmail.com on 1 Jul 2014 at 10:04