1435 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 3-4 years
  • Microlancer Beta Tester
webdesignerart says

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

 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.

1 post
  • Has been a member for 3-4 years
akdwivedi82 says

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>
some text 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

by
by
by
by
by
by