Loader .gif hiding prematurely

Question

What am I trying to do?

I am trying to show a loader image while images are being pulled from Flickr's servers into a waterwheel carousel. Once the set of images is finally loaded into the accordion and waterwheel, the loader image will be hidden.

What is the problem?

The loader image hides prematurely, which leads to no providing the user with no indication that the images are still loading. The images take anywhere from 6-10 seconds to load inside each section of the accordion, which is long enough for the user to leave the page.

I've seen the problem occur in both Firefox and Chrome. Oddly enough there were some very rare instances when the loader image actually stayed up until the images were fully loaded.

What have I done?

I experimented with the location of $("#loader").hide(); inside my two JavaScript functions.

1. Inside the function callback, but after calling the waterwheel plugin with configuration settings.
2. Outside the function callback, but inside displayContent().
3. Nowhere. I guess I was hoping it would automatically hide after the images loaded... :P

You may view the photo gallery and markup/scripts here. Below is the main script and markup.

HTML

<!-- lines 348-364 -->
<!-- Tabs -->
<ul id="tabs">
    <li><a href="#" name="tab1">Glass Windows</a></li>
    <li><a href="#" name="tab2">Lampshades</a></li>
    <li><a href="#" name="tab3">Metal and Glass Sculptures</a></li>
    <li><a href="#" name="tab4">Pi&ntilde;atas</a></li>
    <li><a href="#" name="tab5">Wood Sculptures</a></li>
</ul>
<!-- Content in the accordion -->
<div id="content">
    <img src="images/loader.gif" id="loader"/>
    <div id="tab1" class="thumbs"></div>
    <div id="tab2" class="thumbs"></div>
    <div id="tab3" class="thumbs"></div>
    <div id="tab4" class="thumbs"></div>
    <div id="tab5" class="thumbs"></div>
</div>

JavaScript

// lines 264-293
//
$('#' + tabName).jflickrfeed({
    limit: 20,
    qstrings: {
        set: photoSet,
        nsid: '85496792@N03'
    },
    useTemplate: false,
    itemCallback: function(item){
            $(this).append("<a href='" + item.link + "' target='" + "_blank'" + ">" 
                         + "<img src='" + item.image_n + "' alt=''/></a>");
    }
}, function (data) {

    // Special carousel stuff to make the
    // showcase look spiffy
    //
    $('#' + tabName).waterwheelCarousel({
        speed: 500,
        separation: 200,
        flankingItems: 3
    }).css('position', '');

    // Once the waterwheel is finished loading
    // we can hide the loader
    //
    $("#loader").hide();
});

NOTE: The site is still currently under going "responsive" testing, so things may look a bit rough on different screen sizes...

Answer 1

Completely disregarded the complete feature in Image objects. This appears to work although it's a bit buggy in Opera and Safari, hence the reason for all the "hiding" code going on in the conditional block at the bottom.

$('#' + tabName).jflickrfeed({
        limit: 10,
        qstrings: {
            set: photoSet,
            nsid: '118934683@N02'
        },
        useTemplate: false,
        itemCallback: function(item) {

        // Where all the action is...
        //
        $(this).append("<a class=\"fancybox\" href='" + item.image_b + "' title='(ID# " + item.title + ")'>" + "<img src='" + item.image_n + "' alt='image'/></a>");

        // Store the source of the image and convert it
        // to a string.  Keep track of the count too
        //
        var img = new Image();
        img.src = item.image_n.toString();

        photoCount++;

        // Hide loader gif
        //
        if (photoCount == 10 && img.complete === true) {
            $('#loader').css('visibility', 'invisible');
            $('#loader').css('top', 10000).css('left', 10000);
            $('#loader').hide();
        }
    }
});

Answer 2

I think I know where the problem comes... jflickerfeed fetches the image's data but not the images, so, you add them with and only then the browser does the request to actually get the image. So, that delay you see is the images being actually downloaded from flicker server. Now, if that's the case, you need to bind something to the load event of images and count how many you have. Something like this:

total_images = 0;
loaded_images = 0;
$('#' + tabName).jflickrfeed({
    limit: 20,
    qstrings: {
        set: photoSet,
        nsid: '85496792@N03'
    },
    useTemplate: false,
    itemCallback: function(item){
            total_images = total_images+1;
            img = $('<img>').on('load',function(){
              loaded_images = loaded_images+1;
              it (total_images == loaded_images) $('#loader').hide();
            }).attr('src',item.image_n);
            anchor = $('<a>').attr('href',item.link).attr('target','_blank');
            anchor.append(img);
            $(this).append(anchor);
    }
}, function (data) {

    // Special carousel stuff to make the
    // showcase look spiffy
    //
    $('#' + tabName).waterwheelCarousel({
        speed: 500,
        separation: 200,
        flankingItems: 3
    }).css('position', '');
});

I'm not sure if this is the problem but it makes sense :P

EDIT: you need to think that a little bit because you have more than one tab, but that's the idea

Answer 3

I would try something like this in your $('#' + tabName).jflickrfeed({}); function

 itemCallback: function(item){
        $("#loader").show(); //Show the loading Icon
        $(this).append("<a href='" + item.link + "' target='" + "_blank'" + ">" 
                     + "<img src='" + item.image_n + "' alt=''/></a>");
}

Then keep the $("#loader").hide(); at the end of the script Maybe after the first image loads it hides the loader img but never gets triggered to show for the rest of the images.

Its obvious the flicker feed function calls each image one after another.