A jQuery Visual Image Preloader Redux

Sep12

Get the latest and updated jquery script for preloading your images visually with a spinner. Discard the old and in with the new script!

This is an update to my old post about a graphical or visual image preloader. I’m really surprised that there are a lot of people who needed this. My script was not perfect. In fact it had flaws. But I was not suggesting it for the whole world to use. I wrote it for myself and it was for my own use. I’m surprised that people would talk negative about it on forums. I’m looking at you SplitV. If you think my script was using bad javascript practices then why didn’t you tell me. If you really cared about good code then you should have at least told me. I did mention on my post that I was no hardcore coder. I was a noob back then. End of rant.

Here you go. This is the updated script. Of course you would also need to include the jQuery library. Many thanks to Sexytrends. You can use the code below instead of the old one.

$(function() {
     $('img').wrap('<span class="image-box"></span>').hide();
});

$(window).bind('load', function() {
     var i = 1;
     var imgs = $('img').length;
     var int = setInterval(function() {
     //console.log(i); check to make sure interval properly stops

     if(i >= imgs) clearInterval(int);
     $('img:hidden').eq(0).fadeIn(500);
     i++;
     }, 500);
});

Other Solutions

I also found another very good solution on the Themeforest forums, and it’s written by pogoking, so thank him and not me for the script.

I’ve copied the code from his post and here it is.

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);

HTML

<a href="#">
    <img src="your/image.png" height="xx" alt="some text" width="xx" />
</a>

The CSS

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

To 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 including IE6, and that is according to the author and I take his word for it.

Let me know what you guys think in the comments.

Tags: , , , ,

Comments

Wanna share your thoughts? Leave a message
36
  1. Hi Dino! Thanks for plugin, but I cant understand why my images are show (1-2 seconds) before plugin is begin to work? Please help me.

    • Hi Denis,

      I might be able to help if you can show me a link of what you are working on.

      Hit me back if you are still interested.

      Thanks!

  2. Jack
    September 26th, 2010
    at 11:26 am

    Can I use this script for my template on themeforest.net ? :)

    Thanks

    • Hey Jack,

      Yes, of course. You can use it as much as you need to. A simple link back to this post would be great but not really necessary. :)

      Thanks!

      • Jack
        September 27th, 2010
        at 7:30 am

        I will post your blog link in credits section.
        thanks a lot Jack :)

  3. Koopa
    October 5th, 2010
    at 11:53 am

    I’ve decided not to use this script & continue looking for one that has a “fade-in” feature, but thought I’d be helpful & mention that the code in the HTML section of the Other Solutions isn’t copied correctly… It doesn’t have the class=”preload”

    Should be:

  4. Reda
    October 16th, 2010
    at 8:29 am

    Hi Dino, how are you?
    than you very much for this nice and useful script, i’m actually trying to use it in the web site i’m currently creating but i have a little small random problem: the loading image doesn’t disappear with some images. if i change the image, then the loading gif goes away. I really don’t understand why!
    here is the link for a preview: http://moroccan-arts.com/test-index.php
    thanks a lot for your help
    Reda

  5. Reda
    October 16th, 2010
    at 8:30 am

    Hi Dino, how are you?
    than you very much for this nice and useful script, i’m actually trying to use it in the web site i’m currently creating but i have a little small random problem: the loading image doesn’t disappear with some images. if i change the image, then the loading gif goes away. I really don’t understand why!
    here is the link for a preview: http://moroccan-arts.com/test-index.php
    thanks a lot for your help
    Reda

  6. Reda
    October 19th, 2010
    at 2:41 am

    hehe, well, i’ve just realized that it’s because of my images that are on a transparent background. didn’t know that the loaded image comes on the preloading gif!!
    is there a way to hide the preloader gif when the image loaded??

    • You can just use the following code, when the images has been loaded:

      $(‘.preload’).css(‘background-image’,”)

  7. Andreas
    October 22nd, 2010
    at 10:05 pm

    Hy!

    I have used that script on my site and there is a little problem. The script also “preload” my logo, where i placed a backlink to my site. The backlink is still here, but it doesnt reacts. Can you pleace help me?

    Sorry for my bad english :-)

  8. Reda
    October 24th, 2010
    at 6:40 am

    try to do something like that:
    $(function() {
    $(‘#main_content img’).wrap(”).hide();
    });

    $(window).bind(‘load’, function() {

    var imgs = $(‘#main_content img’).length;

    });
    that will preload only the images contained in your div#main_content

    Hope this will help you

  9. Reda
    October 24th, 2010
    at 6:42 am

    some og the tags are deleted…
    anyways, replace $(‘img’) by $(‘#main_content img’)

  10. Hugo
    October 25th, 2010
    at 11:48 pm

    Hey
    it works on my portfolio (http://hugokintzler.free.fr/berlin.php) but only for the first and the second image. The two others are not displayed.

    an idea ?

    sorry for my english

    Hugo

  11. Reda
    October 26th, 2010
    at 6:29 am

    no need to have twice $(function() { }
    put try to put $(‘img’).wrap… in the first in the first $(function() { } anf then use $(document).ready (function() { } in stead of $(function() { }
    not sure it’ll work but u can try

  12. Hi Dino, how are you?
    than you very much for this nice and useful script.

    but i used with jcycle slideshow it is not working. why this not working ?

  13. Martin
    December 8th, 2010
    at 8:11 am

    This works with jQuery UI (tabs, toggle), jQuery Tools (tooltips). The old script doesn’t work with this libraries.
    Problem was with display:none, hide() etc.

    *** jQuery ***

    $(function() {

    $(‘img’).wrap(‘<span class=”image-box”></span>’);
    });

    $(window).bind(‘load’, function() {
    var i = 1;
    var imgs = $(‘img’).length;

    var int = setInterval(function() {
    if(i >= imgs) clearInterval(int);
    $(‘.image-box img’).eq(i-1).css({ “visibility”: “visible” }).animate({ opacity:”1″ }, {duration:500});
    i++;
    }, 500);
    });

    *** CSS ***

    .image-box img {
    visibility: hidden;

    opacity: 0;
    -moz-opacity: 0;
    filter:alpha(opacity=0);
    }

    Please delete previous comment

  14. Hi,
    thanks for sharing it, this is what i was looking for, but i would say that you should also provide a demo as demo is always a very important part, if i take myself as example i would hardly try something if demo is not there.
    And 2nd thing i would like to tell is that you have forgotten to place the class preload in the html part.
    thanks again.
    Take care

  15. Өлзийбат
    January 11th, 2011
    at 7:13 pm

    Hi guys.

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

  16. N
    March 6th, 2011
    at 7:24 pm

    Is there a new download link for the update?

  17. Denny
    March 29th, 2011
    at 10:44 pm

    I find this incredibly awesome and EXACTLY what I was searching for. Thank You!

  18. zara karthi
    April 21st, 2011
    at 12:19 am

    Thank u Dino. Excellent work and i used here http://demo5.webindia.com/webindia/sample/fv/clients.htm

  19. Thank you.
    I’ll take my chances and use it with some personal ‘mistakes’ for a filter function. Lovely code and very useful.
    In between, this textarea has to be min and max-width since Firefox 4 took the Chrome way.

    You’re in my favorites.

  20. Alan Hughes
    July 4th, 2011
    at 10:52 am

    I don’t really understand. This post links to the old post, and the old post links to this one. Do you still down load the script from the old post? Because I don’t see a new one on this page anywhere.

  21. hey guys, i m working on this website and created a preloader but it is not working as it is supposed to. i tried but not happening. the preoader loads separetly and the ebsite home page separately. plese guide……

  22. Ravi
    September 28th, 2011
    at 2:45 am

    Hii Deno, Thanku so mach for the above piece of code. I have been looking for such an image preloader for a quiet long. You have earned the honor.

  23. Ravi
    September 28th, 2011
    at 3:42 am

    Hii Deno, I have an error thats bugging me since im trying to club your image preloader trick with a smooth scrolling jquery. I would request if you could help me fix the issue. I have posted both the urls that im working on a test site.

    http://addvisors.co.in/test/index.html

    http://addvisors.co.in/test/test_error/index.html

  24. Ravi
    September 28th, 2011
    at 4:13 am

    Hii Deno, Im new to this jquery thingy, first of all Leme be precise on the issue, I tried using a smooth scroller jquery along with the preloader jquery for the images in the html. I dono where both the codes of the jquery are clashing, the scroller of the navigation doesnt work like ( http://addvisors.co.in/test/index.html ) . Secondly the images used have the fadein effect but the preloading “gif” image is not being displayed. Need some help in fine tuning the errors. Hope to see some helpful coffee code seeds from you. Thank you once again. Here is the page where im getting the error bugs ( http://addvisors.co.in/test/test_error/index.html )

  25. Hello Dino,

    I found this page while looking for a simple preloader. It works great, so thanks very much for sharing.

    I have modified it slightly in order to apply the preloader only to certain images (in this case ‘#post img’) and to show a 32×32 animated icon while loading the image.

    Here is the modified version if someone else needs it (I hope it will be formatted right):

    $(function() {
    $(‘#post img’).each( function() {
    var w = $(this).width();
    var h = $(this).height();
    $(this).parent().append(”);
    $(this).wrap(”).hide();
    });
    });

    $(window).bind(‘load’, function() {
    var i = 1;
    var imgs = $(‘img’).length;
    var int = setInterval(function() {
    //console.log(i); check to make sure interval properly stops

    if(i >= imgs) clearInterval(int);

    $(‘div.image-loader’).fadeOut(200, function() {
    $(‘#post .text img:hidden’).eq(0).fadeIn(500);
    $(this).remove();
    });
    i++;
    }, 500);
    });

  26. Hi I am so grateful I found your weblog, I really found you by mistake, while
    I was looking on Aol for something else, Nonetheless I am here now
    and would just like to say thanks a lot for a incredible post
    and a all round entertaining blog (I also love the theme/design), I don’t have time to read it all at the minute but I have saved it and also added in your RSS feeds, so when I have time I will be back to read a lot more, Please do keep up the superb work.
    nerddan.tumblr.com

  27. Hi there to all, how is the whole thing, I think every one
    is getting more from this web site, and your views are good in support
    of new users.

  28. Hi there just wanted to give you a quick heads up.
    The text in your content seem to be running off the screen in Opera.
    I’m not sure if this is a format issue or something to do with browser compatibility but I figured I’d
    post to let you know. The design and style look great though!

    Hope you get the problem resolved soon. Cheers

  29. I’d like to thank you for the efforts you have put in writing this site. I really hope to see the same high-grade content by you later on as well. In truth, your creative writing abilities has motivated me to get my own site now ;)

Find me on the Web

Other places you can find me

Daily Digest

Resource Sites for Inspiration

Extra Stuff

Represent!

Search this Website

Looking for something specific?