1547 posts
  • Has been part of the Envato Community for over 3 years
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
webdesignerart says

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

 CSS :
#image_placeholder { 
  background:#000 url(loading.gif) no-repeat 50% 50%;
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 part of the Envato Community for over 3 years
akdwivedi82 says

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

Here you go

    $.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');
                if(this.complete || ($.browser.msie && parseInt($.browser.version) == 6)) { $(this).trigger('load'); }


<a href="#" class="preload">
some text CSS :
.preload { display:block; background:transparent url(your/loading/icon.gif) no-repeat center center; }
Run the script:
        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.