Jquery img preload not working in FireFox

Question

Hi.

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.