Wanted: jQuery image loader

VagrantRadio said
This is what I do in a round about way. HTML :

CSS :

#image_placeholder { 
  background:#000 url(loading.gif) no-repeat 50% 50%;
  width:width;
  height:height;
}

jQuery:

jQuery(document).ready(function() { //hides image and shows background loading image
    jQuery("#image_placeholder a img").css("display", "none");
});
jQuery(window).load(function() { //fades in image and hides loading image
    jQuery("#image_placeholder a img").fadeIn("fast");
});

The delay between the document ready and the window load shows the loading image that is the background behind the image.

Thanks friend your code solve my problem thanks.

pogoking said

Yep, I would like you to share the script, if you can Thanks!

Here you go

Script:

(function($){
    $.fn.preloadImages = function(options){

        var defaults = {
            showSpeed: 500,
            easing: 'easeOutQuad'
        };

        var options = $.extend(defaults, options);

        return this.each(function(){
            var container = $(this);
            var image = container.find('img');

            $(image).css({ "visibility": "hidden", "opacity": "0" });
            $(image).bind('load error', function(){
                $(this).css({ "visibility": "visible" }).animate({ opacity:"1" }, {duration:options.showSpeed, easing:options.easing}).parent(container).removeClass('preload');
            }).each(function(){
                if(this.complete || ($.browser.msie && parseInt($.browser.version) == 6)) { $(this).trigger('load'); }
            });
        });
    }
})(jQuery);

USAGE

HTML :

<a href="#" class="preload">
    </a>

CSS :

.preload { display:block; background:transparent url(your/loading/icon.gif) no-repeat center center; }

Run the script:

jQuery(document).ready(function(){
    jQuery('.preload').preloadImages({
        showSpeed: 500,   // length of fade-in animation, 500 is default
        easing: 'easeOutQuad'   // optional easing, if you don't have any easing scripts - delete this option
    });
});

The script works in every browser (I’ve tested it in IE6 -8, FF, Opera, Chrome and Safari) and nicely loads images from cache. You can use any other class or element you like for preloading (it doesn’t have to be anchor link). Feel free to use and improve it wherever you want. If you think that something here could be written better – let me know

Hi there! Thanks for this script. It really does what I would like to do. But there is one problem. If you look at my page : http://photos.abhizworld.com/collections/scenery-landscape-travel/prague/entrance-prague-castle-prague-cz/ The image loads first,then the fading affect and the image reappears. Can you please help ? I am hosting the site on wordpress.

-Abhi