Search code examples
jqueryhtmlcssflickranimated-gif

Loader .gif hiding prematurely

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

Solution

  • 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();
        }
    }
});