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
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.
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!
September 26th, 2010
at 11:26 am
Can I use this script for my template on themeforest.net ? :)
Thanks
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!
September 27th, 2010
at 7:30 am
I will post your blog link in credits section.
thanks a lot Jack :)
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:
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
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
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??
February 1st, 2012
at 4:25 am
You can just use the following code, when the images has been loaded:
$(‘.preload’).css(‘background-image’,”)
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 :-)
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
October 24th, 2010
at 6:42 am
some og the tags are deleted…
anyways, replace $(‘img’) by $(‘#main_content img’)
January 28th, 2013
at 3:26 pm
thank you for the efforts you have put in writing this site.
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
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 ?
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
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 ?
March 6th, 2011
at 7:24 pm
Is there a new download link for the update?
March 29th, 2011
at 10:44 pm
I find this incredibly awesome and EXACTLY what I was searching for. Thank You!
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
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.
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.
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……
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.
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
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 )
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);
});
November 9th, 2012
at 1:04 am
It’s fantastic that you are getting thoughts from this piece of writing as well as from our discussion made at this time.
November 28th, 2012
at 7:46 am
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
November 30th, 2012
at 3:00 am
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.
January 1st, 2013
at 1:41 am
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
January 6th, 2013
at 1:54 am
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 ;)
April 26th, 2013
at 8:30 am
Link exchange is nothing else except it is just placing
the other person’s blog link on your page at suitable place and other person will also do similar in favor of you.
May 3rd, 2013
at 3:17 am
Its such as you read my thoughts! You appear to grasp so much about this,
like you wrote the ebook in it or something. I feel that
you just could do with a few percent to power the
message house a little bit, however other than that, that is wonderful blog.
A great read. I’ll definitely be back.
May 9th, 2013
at 11:32 pm
My brother suggested I might like this web site.
He was once totally right. This submit actually made my day.
You cann’t imagine just how much time I had spent for this information! Thanks!
May 15th, 2013
at 12:22 pm
I just like the valuable info you supply for your articles.
I’ll bookmark your weblog and check again right here regularly. I’m
relatively certain I will learn plenty of new stuff proper here!
Best of luck for the next!
May 16th, 2013
at 4:32 pm
Unquestionably believe that which you stated.
Your favorite reason appeared to be on the internet
the simplest thing to be aware of. I say to you, I certainly get irked while people think about worries that they plainly don’t know about. You managed to hit the nail upon the top as well as defined out the whole thing without having side effect , people can take a signal. Will likely be back to get more. Thanks
May 19th, 2013
at 3:47 am
Hi, this weekend is fastidious designed for me, for the reason that this occasion i am reading this enormous informative piece of writing here at my home.