Question

I’ve created a simple image slideshow loader, with thumbnails that, when clicked, load a larger image on a main stage. I’m using the “Reel” plug-in to create a panoramic, rotatable “3D” image on the main stage.

It’s fun, and everything works great in webkit. You can see the live page here:

http://bit.ly/Rv9ks3

The slideshow aspect of this is done with nested callbacks. Clicking on any of the static thumbnail links:

a) fades out the current existing rotatable image

b) as a callback to the fadeOut(), the reel plugin gets removed from the image, all events get unbound from it, it gets hidden again for good measure, and the img src gets swapped out with a new src.

c) then, using Desandro’s imagesloaded plug-in to test that the new src for the img has been downloaded, the main image gets faded back in.

d) as a callback to that fade-in, the Reel plugin gets called on the new image.

Here’s the problem: in Firefox, the fade-in is happening with the old, previous image still on the stage. It’s as if the old src is “sticking” momentarily, which is weird because the callback script has to be executing sequentially. Then in a moment or so the image abruptly updates to the new image. So everything works, but it’s herky-jerky, when I’m striving for smooth transitions.

Note: once all the images are cached, everything works perfectly. So after playing with this a bit, you might need to clear the cache in Firefox to reproduce the behavior.

Here’s the relevant code:

$(document).ready(function () {
    $('#the-image-to-rotate').reel(); //runs the plugin
    $('#the-image-to-rotate').on('loaded', function(){  // the plugin's 'loaded' event
        $(this).data('velocity', 4); // kick off an initial velocity
    });

    $('#engraved-vase-pager a').on("click", function(event) {
        event.preventDefault();

    //build the URLS for the new img and the plug-in
        var newRelativeUrl = $(this).children('img').attr('src').slice(0,-9);
        var firstImageUrl = newRelativeUrl + "01.jpg";
        var templateUrl =  newRelativeUrl + "##.jpg";

        $('#the-image-to-rotate').fadeOut(400, function() {
            $(this).unreel()     // tear down the plugin
                   .unbind()      // remove anything lingering
                   .hide()      // hide the de-plugin'ed img
                   .attr('src', firstImageUrl);     //swap out with the new src

             $(this).imagesLoaded(function($images, $proper, $broken) {
                $(this).fadeIn(400, function() {
                    $(this).reel({
                        images:     templateUrl,
                    });
                    $(this).on('loaded', function(){
                        $(this).data('velocity', imageVelocity);
                    });
                });
            });
        });
});

Firebug says that “Image corrupt or truncated” on load of a previously unviewed image, but the message isn’t really descriptive, because everything’s working fine, except for the glitchiness. You can see in my exhaustive logging that imagesloaded shows zero broken images.

This is driving me up a tree. Thanks in advance for any insight!

Answer 1

Inspired by Preli’s comment here I went on to discover that first setting the src to an empty string (“”) before setting the new actual src for the img for some reason snaps Firefox to attention, and resets the load setting, so that the callbacks can fire correctly. I have no idea why, but this works. Hope this helps somebody.