300 posts
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Has been a beta tester for an Envato feature
+5 more
campuscodi
says

If your interested in non-jQuery solutions: http://bit.ly/afG6Md or http://bit.ly/a7KQ9G

629 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VagrantRadio
says
If your interested in non-jQuery solutions: [link removed] or [link removed]

If that’s not self-promotion, I don’t know what is. I wouldn’t recommend those methods either.

629 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VagrantRadio
says

If you’re looking for a simple image loader, try the jQuery lazyload plugin.

300 posts
  • Has referred 1+ members
  • Has sold $100+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Has been a beta tester for an Envato feature
+5 more
campuscodi
says

I think he’s looking for a graphic loader, alongside a loading animation. Maybe a spinner or something.

@vagrant: That’s not self promotion because it’s not my site. I just work there and I was (re)testing the loaders just after I have read this post. Thought it would be useful to him.

629 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VagrantRadio
says
I think he’s looking for a graphic loader, alongside a loading animation. Maybe a spinner or something.

Once again; If you’re looking for a simple image loader, try the jQuery lazyload plugin.

It doesn’t load images until you scroll down the page and you can replace the standard background image with a spinner, loader image, dancing unicorns, whatever.

741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 6 years
  • Has sold $40,000+ on Envato Market
+3 more
Orbital_Themes
says

Chill out guys :) I’ve already written my own jQuery script. I don’t know if it’s written in the way it’s supposed to be, but it works as it should, works on cached images and everything :) If someone wants I can share this script here.

@VagrantRadio – I’ve seen the lazyload before, but that’s not what I was looking for. Thank’s for suggestion anyway! :)

753 posts
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 1+ items on Envato Market
  • Had an item featured on Envato Market
+4 more
AdamGold
says
Chill out guys :) I’ve already written my own jQuery script. I don’t know if it’s written in the way it’s supposed to be, but it works as it should, works on cached images and everything :) If someone wants I can share this script here. @VagrantRadio – I’ve seen the lazyload before, but that’s not what I was looking for. Thank’s for suggestion anyway! :)

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

Thanks!

741 posts
  • Had an item featured on Envato Market
  • Won a Most Wanted contest
  • Has been part of the Envato Community for over 6 years
  • Has sold $40,000+ on Envato Market
+3 more
Orbital_Themes
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">
    <img src="your/image.png" height="xx" alt="some text" width="xx" />
</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 :)

27 posts
  • Has been part of the Envato Community for over 7 years
  • Has referred 10+ members
  • Has sold $10,000+ on Envato Market
  • Has collected 10+ items on Envato Market
+1 more
geniuspro
says

Hi guys.

i hope use http://neteye.github.com/activity-indicator.html this preloader image script. how can i made this ?

241 posts
  • Has sold $5,000+ on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Sells items exclusively on Envato Market
  • Won a Most Wanted contest
+2 more
Morad
says

I’m always looking for this script source, Thanks :)

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