0

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

3
  • are you sure the images are still loading when the loader disappear? maybe the waterwheel plugin is causing that delay for images to appear, i've tried using some breaks on the code and it looks like images are appended on the itemCallback function and after all images are loaded (you can see them showing up one at a time) the loader is hidden. I would go with a waterwheel plugin problem here
    – arieljuod
    Feb 8, 2014 at 20:12
  • @arieljuod Definitely plausible, although I find it very odd that a lightweight plugin would take so long to organize all those images...
    – anon
    Feb 8, 2014 at 20:16
  • i have an idea, check my answer
    – arieljuod
    Feb 8, 2014 at 21:16

3 Answers 3

1

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

4
  • It makes sense what you're trying to do, but I'm perplexed by the conditional statement inside $('<img>').on().... Isn't that always going to evaluate to true? So the loader might hide after the first image is loaded or blink.
    – anon
    Feb 9, 2014 at 15:43
  • the total_images counter will increase faster than the loaded_images counter, since loaded_images are count after the load event of each image is triggered
    – arieljuod
    Feb 9, 2014 at 20:46
  • you can have a race condition problem if images are cached though. I'm not sure if jflickerfeed gives you the total number of images fetched somewhere else before itemCallback is run, if you can get the number somewhere else that would be better
    – arieljuod
    Feb 9, 2014 at 20:48
  • This is really dumb... I moved the line $("#loader").hide() to somewhere outside of the function and moved the img tag to the bottom of the content division and it worked. Regardless, I'm going to accept your answer because logically it makes the most sense.
    – anon
    Feb 15, 2014 at 23:10
0

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.

1
  • Tried this but it did not work. But I do understand what you're saying. I did notice that you posted a comment (but removed it) that was something to the effect of creating a function that hides the loader once the content section is loaded. This logic makes a lot of sense to me, so I'm going to create a new function and see what happens.
    – anon
    Feb 8, 2014 at 20:29
0

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.