Question

I recently did a small jQuery snippet that allows me to show a loading img until the real image is loaded.

The snippet seems to work in Safari, Chrome but not FireFox.

FireFox only displays a loading alt and never switches to the loaded image.

Here is the snippet

var loading = $('<img src="/media/ajax-loader.gif" alt="loading" />');
    $('.thumbnail').each(function(){
        var loadIMG = loading.clone();
            $(this).after(loadIMG).load(function(){
                $(this).fadeIn('fast');
                loadIMG.hide();
        }).hide();
    });

Any ideas why?

Answer 1

You haven’t said what exactly is happing on FF but below can be one of the problem. From jquery documentation

It is possible that the load event
will not be triggered if the image is
loaded from the browser cache. To
account for this possibility, we can
use a special load event that fires
immediately if the image is ready.
event.special.load is currently
available as a plugin.

Here’s the link for plugin.

Edit:

Based on comments from load event, try below:

$('.thumbnail').each(function(){
        var loadIMG = loading.clone();
            $(this).after(loadIMG).load(function(){
                $(this).fadeIn('fast');
                loadIMG.hide();
        }).hide();
        if (this.complete) $(this).trigger("load");
});

Of course, the plug-in seems to be doing same thing along with handling some other scenarios as well as.