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: Image Preloader, javascript, jQuery, preloader, redux

Denis
September 14th, 2010
at 3:02 am

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.

Dino
September 26th, 2010
at 6:15 pm

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!

Jack
September 26th, 2010
at 11:26 am

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

Thanks

Dino
September 26th, 2010
at 6:14 pm

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

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:

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

Reda
October 16th, 2010
at 8:30 am

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??

Allan
February 1st, 2012
at 4:25 am

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

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

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

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

Reda
October 24th, 2010
at 6:42 am

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

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

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

Өлзийбат
November 6th, 2010
at 2:30 pm

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 ?

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;

*** CSS ***

.image-box img {
visibility: hidden;

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

Please delete previous comment

cryoffalcon
December 25th, 2010
at 6:12 pm

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

Өлзийбат
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 ?

N
March 6th, 2011
at 7:24 pm

Is there a new download link for the update?

Denny
March 29th, 2011
at 10:44 pm

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

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

Levi Szekeres
June 7th, 2011
at 3:45 am

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.

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.

Ashish
August 2nd, 2011
at 1:11 pm

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……

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.

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

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 )

Marco
December 16th, 2011
at 11:09 pm

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

ray bans
May 2nd, 2012
at 4:52 pm

A little helpful for me! Just as the little chance to use this!! But still thnks!!!:D

Dino Latoga