1665 posts
  • Has been part of the Envato Community for over 4 years
  • Has been a beta tester for an Envato feature
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+1 more
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 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

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

Helpful Information

  • Please read our community guidelines. Self promotion and discussion of piracy is not allowed.
  • Open a support ticket if you would like specific help with your account, deposits or purchases.
  • Item Support by authors is optional and may vary. Please see the Support tab on each item page.

Most of all, enjoy your time here. Thank you for being a valued Envato community member.

Post Reply

Format your entry with some basic HTML. Read the Full Details, or here is a refresher:

<strong></strong> to make things bold
<em></em> to emphasize
<ul><li> or <ol><li> to make lists
<h3> or <h4> to make headings
<pre></pre> for code blocks
<code></code> for a few words of code
<a></a> for links
<img> to paste in an image (it'll need to be hosted somewhere else though)
<blockquote></blockquote> to quote somebody

:grin: :shocked: :cry: Complete List of Smiley Codes

by
by
by
by
by
by