QueryLoader – preload your website in style
There is always a minor problem when it comes to preloading image on a website. Nobody really has a full solution for it. There are a lot of preloaders available, but most of the time they only display the words: “Loading page” or have an animated image that spins. Why can’t there be a nice loading bar of some kind?
I’ve gotten a few request on how to make a preloader, or people asking me how to get all the images of a web page and preload them (even the images in CSS).
This preloader has it all. Loading bar, custom animations and getting all images included in the web page.
Download
Get the preloader script!
Example
See the preloader in action.
(a special shout out goes to Sieb of Siebdesign for coming up with the animation and the idea of building a preloader)
Download the source code here:
http://www.gayadesign.com/scripts/queryLoader/queryLoader.zip
View the example here:
http://www.gayadesign.com/scripts/queryLoader/
Example with percentage visible:
http://www.gayadesign.com/scripts/queryLoaderPercentage/ or download: http://www.gayadesign.com/scripts/queryLoader2/qL2.zip (thanks to Olivier Dumetz)
Features:
- Preload a whole web page.
- Preload a part of the page.
- Gets all images, <img> tags and background-image of your CSS
- Easy to implement.
- Adjustable loading bar.
- Tested in Firefox, Safari, Opera, Chrome, IE7, IE8 and IE6 (script will be ignored in IE6 though).
Implementation:
To implement this script you don’t need any Javascript experience. Just follow these easy steps:
1. Download the zipped archive.
2. Upload the contents to your webserver.
3. Place the following code in the
part of your page:<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js'></script> <link rel="stylesheet" href="css/queryLoader.css" type="text/css" /> <script type='text/javascript' src='js/queryLoader.js'></script>
Remove the jQuery part if you have already included the file.
4. Place this code at the bottom of your page:
<script type='text/javascript'> QueryLoader.init(); </script>
You are now done!
Customization:
If you only want one element / container to be preloaded you can setup a jQuery selector to only preload what you want.
Let’s say you have an element with an id. You only want the images inside that element to be preloaded. You can use the following code:
<script type='text/javascript'> QueryLoader.selectorPreload = "#idOfTheElement"; QueryLoader.init(); </script>
Be aware that you can only preload a single element. So using a class selector could cause some problems.
To read more about selectors in jQuery you can read this page in the jQuery docs.
To adjust the animations of the loading bar, you can take a look in the following functions:
QueryLoader.animateLoader() and QueryLoader.doneLoad()
Adjusting these functions requires a bit of jQuery knowledge.
Any questions about QueryLoader and implementations can be posted in the comments below.
Good luck and happy developing.
Articles like this one
526 Comments
-
Love it! I think I will test it out and let you know how I get on :-)
good work dude!
-
great work! thanks.
i needed such a preloader a month ago, but it`s great having it now too.
-
Where did you get the idea… :P
-
@dejunky I’d love to see your version!
@andi good luck! glad to be of service ;)
@sieb a great designer from the netherlands ;)
-
very very awesome!!!… THAAANKS
-
GREEEEATT!!!!
Thanks a lot
-
I unzipped the two folders from the download (CSS & JS) and upload the two folders to my root folder on the server. I then pasted the 2 scripts above in this post in the middle of my webpage and at the footer as well. However, I still can not see the loader working. Any ideas? The page to view it is at: http://www.genesisinvestmentassociates.com/
Thanks ahead of time!
-
Was already waiting for a new post – this absolutely made up for the waiting time, great script mate!
-
@thanksjc it looks like you didn’t correctly place the scripts. The code shown in point 3 is best placed in the section of your page. The code in point 4 is best placed at the bottom just before the closing BODY tag.
-
my comment should have read, “…best placed in the HEAD section…”
-
Hello,
I’m having similar problems: Loader is not working. Using latest jQuery (1.3.2). The url is http://www.dredovi.info
JS Console says:
Error: $(window).height is not a function
Source File: http://www.dredovi.info/scripts/queryLoader.js
Line: 103
-
I like it!
But mine only loads about 75% of the way and stops.
Any ideas?
http://dj.gautch.comThanks!
-
Wow! Thanks so much for the sudden interest and the comments people!
@marco: thanks buddy! glad you liked it :)
@michael: thanks for answering the question, that’s what I was about to say haha
@Gauth: there seems to be a broken image on your site. it can’t be loaded so queryloader thinks it is still loading. the image is:
http://gautch.com/DJ/css/img/12_col.gif (404 error)
-
I have same problems. The url is dredovi.info and JS console says Error: $(window).height is not a function Source File: scripts/queryLoader.js Line: 103
-
Thanks Michael, but I’m still having trouble. I hate to sound like the newbie and all, but I just can’t get it to work. I have moved the code in point 4 to right before the closing BODY tag, and put the code in point 3 at the beginning of the BODY section. Is this the right section for point 3? I couldn’t tell by what was written. I have however tried other sections of the page’s html but no luck either. Anyway, this script looks killer and I’ve been looking for one like this. I would love to see this working. Thanks.
Page link: http://www.genesisinvestmentassociates.com/Our_Work.html
-
This is a great idea. Thanks for this.
-
@avram: have you included jQuery? Strange that it gives that error.
section (code) and the code of step 4 just before I hope it works now :)
@thanksjc: you have to put the code of step 3 inside your
-
I have now put the code from point 3 into the head section of my page’s html and the from point 4 into the page’s html right before the closing of the body tag. Still no luck yet. Am I missing something? Do I have to edit any of the files from the zip I downloaded?
Page link: http://www.genesisinvestmentassociates.com/Our_Work.html
-
@Gaya: Yep, latest jQuery (1.3.2) is loaded just before your .js file.
@thanksjc: As far as I can see, you’re getting same error in JS console as I am.
-
@Gaya & Avram: QUOTE – “Yep, latest jQuery (1.3.2) is loaded just before your .js file.” This was stated above. I have that file uploaded to my server as well, but do I need to do something special with it in terms of this script to make it work. If so, that may be the issue for me because I have not touched any files, just cut and pasted the codes from points 3 & 4 and put them in my page’s html.
-
@thanksjc: Again, as far as I can see, your jQuery is not loaded correctly. You have some HTML tags in SRC property of (jQuery) script tag. There should be plain URL of .js file.
-
@Gaya That worked! Thanks sooo much!!
-
@Gautch: great! good to hear
@Avram: is there a possibility that you are running jQuery in no conflict mode? You’d have to adjust the script if that is so.
-
I wasn’t using jQuery prior to your script on this website, but it seems that some other script is setting jQ to noConflict mode. Now I have placed $ = jQuery.noConflict(); before calling your init() function and it seems to work now, but it stucks at half. Probably I have some dead images. Will check that.
Thanks for your help.
-
No problem! Let me know if it works after you fix things :)
-
OK, jQ wasn’t working because of Prototype lib, which was loaded after jQ and your script (but before calling init() method). I have fixed that by assigning jQ noConflict to $. But it still stucks at half despite I have only one image on my page (logo.jpg, and it’s present, so no 404 err here). The other issue is – the page actually displays, and when it’s loaded, preloader is displayed. But this is normal (though not as it should be) as init() is called at the end of page, no?
-
I can’t find out what’s the problem :(
You can test it yourself by opening dredovi.info/?preloaderAnd little suggestion: You could add some kind of debug mode which would display (below the progress bar) which file is being loaded at the moment? That way we could find and eliminate problems causing preloader to stop at certain point.
-
Very nice , just what I am searching for . thank you so much .
btw very nice looking website :) keep the good work .
best regards
Karar!
-
Works fine in Opera too.
-
Wow, just like the page transitions in MSIE </grin>
-
Great! Works perfectly. Great Work done!!! Highly recommended.
-
Still no luck here getting it to work. : (
Looks great though and it will definitely bless a lot of people! Good work!
-
Hello Gaya,
I have looked a bit around the page with FireBug and found out that, for some reason, your preloader tries to load Google AdSense AD as IMG – have no idea why, as you have properly placed “*:not(script)” selector in your script :/
-
Good concept, I might give this a try.
-
Id like to know how to adjust the colors…
-
Nice. Practical and purdy, as usual.
-
Hi, thanks, but it didn’t worked as expected. My web page had the time to show just before the black layer to appear.
Nonetheless the idea was great, this is why I made my own ( I explain how at http://u.nu/8mue3 )
The only difference is that I have to add a new ” at the begining of my source code.
-
Awesome work, Stumbling this post
-
nice script works well, had minor issue with the script not being compatible with part of my flash animation, fixed that and it works perfect. thanks for sharing.
-
This is freakin awesome!! I’ve been wanting a jQuery loader just like this for a while.
I can’t figure out how to change the colors though! I’d appreciate any info on how to mess with that.
-
Durr! I figured it out colors are all in the .css file!
-
Stops working if you clear the cache and hit refresh …
But other than that, its totally awesome script !!!
-
This sux. It preloads to about 50%-70% and “hagns-up” on HTML5 pages with audio and video tags (de-facto self-preloadable/bufferable elements).
-
Hi all! Thanks for the overwhelming interest!
I’ve been taking the comments in account and updated the script just now. Elements with a src attribute were loaded in QueryLoader but I restricted it to only “img” tags. I recommend that you download the new version.
-
This is exactly what I was looking for! Right on time!! Thanks!
-
Can you create a wordpress plugin from this?
-
@Avram, dredovi.info seems to work now, did you get the latest version or was it something else?
-
Does it also preload flash objects ?
-
@Jens: Nope, only images. can’t preload flash
-
Nice work… great and thanks a lot
-
This seem to work really well, apart from a small flash of content before the preloader kicks in and hides the content. Any ideas why this happens and how it can be prevented.
Example can be seen by loading any of the pages on my site (http://www.digitalslrphotos.co.uk)
The first element is an image in the header, which I thought work force the loader to kick in, but as you can see, some of the text elements annd the header image are shown before being covered by the loader (at least they do in Opera).
-
Nevermind – fixed the issue – it was a scrollTo script that was conflicting with queryLoader. Removed it and all is well. Great script.
-
amazing…great job
-
Is it possible to make it load only once?
-
Hiya – I’d really like to use this but just can’t get it to work; I’ve uploaded the js & css files and added the script to the head and body of my page. Sometimes when I try and load the page it seems to go black for a split second, but mainly it’s just the same as before – lots of images loading one by one – very messy!
I wonder if there’s a clash with other Javascript on my page, but all I’ve got is tool-tips – it’s mainly just html and css.
The offending page is http://www.fluidmastering.com/gallerytestnew.htmI’m probably being ignorant – never used jQuery before…
any help gladly recieved!
ta,
Nick
-
aku enggak paham, tapi bagusss…good good…nice to meet u..bai bai…dahhh
-
Hello
I am using query loader (Jquery) and startGallery (Moo Tools), only if I call the two libraries it conflicts, how to solve this problem with both?
-
I’m experiencing something strange, when I apply the script to my page it says, “ie is null” (line 46).
This is both on Firefox 3.5.3 and Safari 4.0.3 on the Mac.
The timeout isn’t meant to be triggered for non IE browsers, right?
-
To my above comment…
Just noticed the same thing happens to your demo page which works fine.
Problem is, the loader gets stuck when I try it on my page, so I thought it was related to the ie error thing. Seems like I was mistaken.
-
What about:
overlay: “”,
loadBar: “”,
preloader: “”,Can u explain how can we use this?
-
Thanks all for the comments!
@NickW:
I have no idea. maybe you should check your CSS/HTML@Alex Talha:
You can try and convert my script into no conflict mode.@rikard:
Do you have a broken image on your site?@steveg:
This variables are necessary for the script to function. various dom elements will be set to those variables.
-
bien même très bien ,
-
Hey,
Thanks for queryLoader, it’s great.
Been trying to modify it though without success. How could I go about just having the first part of the animation where the line goes from left to right but not having the whole div change colour (the last part of the animation)? So I kind of get left with a minimal progress bar if you get what I mean.
Thanks again for sharing this!
-
@MC:
Look in the .doneLoad function. you can change the animation there. (top, height animation)
-
did not understand, can you explain? I’m still new to the subject. what would be the method to work
-
This is pretty darn cool! You really have some really unique scripts here on your blog.
-
For anyone having an impossible time getting this working without a quick flash of content showing first – here’s what I found. I have SEVERAL plugins on wordpress that throw javascripts up to the header and footer, so I thought for sure it must have been one of those…debugged one by one and it wasn’t. My culprit was the Google Analytics code I had in my footer. Mu guess is it was the try/catch code, but I put it in the header and it worked just fine.
Hope that helps someone!
-
Wondering why you chose to make IE6 ignore the script? In any case, one of the nicest preloaders I have seen, good stuff. Will definitely use it on some of my sites.
-
Great stuff my friend!
-
Great stuff !! i like it :) but when i installed it on my web site i saw that QueryLoader start his animation after page is loaded and i already see the page content :) it’s waiting one sec and then animate :) it’s possible don not show page content before QueryLoader start his animation ?
-
problem is fixed :D i removed browser cache :) and now content is visible after QueryLoader animation.. cool !
-
Is it possible to show a loading image instead of the ‘loadingbar’ and how can we implement that?
-
Thanks for this pluging, but what about Google Chrome compatibility’s ? Not work for me… Any ideas please ?
-
Nice tip. I’ll try it out and check how it works…
-
I know I’m missing something as well. I’ve placed the code where I understood it should go based on the tutorial you have above. then I checked the source code of the example, just to make sure. i’ve done all the tweaking i know to do but the preloader gets bypassed and goes straight into the site, showing the 30-some-odd items remaining. help?
-
Hey ! :-)
Your script works fine ! Without a problem ! keep up your fresh work ;-)
Question at the jquery Pro’s in here:
Is it better to load the script at the bottom of the body or in the header ?Greetings,
Frankie
-
Thanks for all the comments!
@Frankie
It might be better to load it at the bottom, but that goes against a lot of people’s work flow. You can do whatever you’d like :)
-
Hey
This is really cool.I am having small problem with query loader in chrome and IE7 but works really great in firefox ,IE8.
It does not load (leaves out small portion on left side of page) entire window when loading in the chrome and IE7.Can you please help me with that issue.
Thanks,
-
It’s working now.
Thanks
-
Hi !
Thank you so much for this poste, exactly what i needed, but i have a kind a problem between html and php pages : html works but not php ?? can you help me please ? i’m refounding my website to get jobs this winter …
-
sorry
just fake links make stop the preload …
thx again
-
Hi, use jQuery.browser method on your script
Know -> http://docs.jquery.com/Utilities/jQuery.browserI replace your code to
ieLoadFix: function() {
if(jQuery.browser.msie){
while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
QueryLoader.imgCallback();
}
}
},
-
Thanks for this preloader, I’ve just tested it and it works on every commonly used browsers out there. Great work!
Cheers :)
-
Glad it is working for everyone!
Thanks for the tip Leo! I saw that browser functionality a few days ago haha. Was browsing a cheat sheet and basically hit myself in the head for not using it.
Thanks for pointing this out, will surely use it in the future.
-
very nice, very nice
-
Hi..
any solution to use this effect in IE6-??
Sory my english suck,
cheers
-
i got an error in firefox and chrome
ie is null
[Break on this error] if (ie[0].match(“MSIE”)) {\r\nhow i fix it pls!
-
Hi
I have used your preloading technic at http://www.highlevelmedia.es , it is quite handy thanks for sharing
It flicker a bit in safari on Mac, (showing content shortly then the preloader, i have to see why.)
Thanks again
-
Hi,
It’s a great script! But I have som issues in IE7. The content behind the preloader shows quickly before the preloader starts to preload.
How can that be solved?
-
I noticed that someone else had issues with scrollTo. I have a site that requires the flesler (http://flesler.blogspot.com/2007/10/jqueryscrollto.html) jquery scrollTo plugin. Any idea what the issue may be? I’m new to jquery, but any help would be appreciated. I’m also having the same issue as Urban, in that the site shows before the preloader in IE, but this may be an issue with scrollTo.
Thanks
-
thanks so much. as mentioned above, this script came out @ just the right time!
kudos =)
-
This is such an elegant loader, but I’m having some trouble getting it to pre-load a CSS-specified background image.
Example here: http://somewherenevertraveled.com/beta/
-
Love this. Tried this and worked on all platform. Bravo
-
oh,you are my hero..haha! i really love this tweak..thanks for sharing sir!! it make my page look more stylish..thanks again..it’s so easy to apply it instead..but the result..WOW!
-
Brilliant plugin Gaya…I was wondering if there’s a way for us to specify not to load content inside a particular element? Like say load everything inside the body but leave any images inside the image div/block?
-
In the code, you can find several places where jQuery tries to find elements.
On line 59 you see a part with *not(script), make this: *not(script, .class_name_that_needs_to_be_ignored)
Hope this will work for you!
-
I just wanted to say thank you so much, finally a preloader that does it the way i had envisioned but didnt but the effort into mustering up! I was wondering, I am noticing the occasional stall at 75% in my firefox only, but this is a browser related thing as my firefox has always acted strangely when I am coding with dynamically resized images that utilize a simple php image resizer (probably one of my plugins). If I ctrl f5 the page it will load fine, but after a few page loads, the 75% hang again. Would it be too difficult to load a failsafe, basically a timeout parameter? These preloaders can be dangerous in that in dynamic pages, if something goes wrong imagewise at some point, this puppy may just hang and effectively lock out your site. A timeout parameter that could be set would give that assurance that, if after lets say 10 seconds of trying, no matter what the page will be revealed. I will look at how to do this, but what do you think? Again, awesome work!
sam
-
ok, added my own little timeout in your animate loader function, works for me. Just security in case any images ever break in my dynamic site. thanks, very nice script.
-
urgent help needed. i used the your preloader script on my website http://www.mec-holdings.com, works fine with firefox.
cannot load page error in IE7! how should i resolved it, please email me at rai@bold.co.in
Thanks!
-
Hey! I’ve been using this and it works great, fantastic work. The only problem I’m having is it seems to hang at around 90-95% for Google Chrome users. Everything is set up properly on my end, and the Chrome users can, for some reason, see the entire thing properly if they view the example hosted here.
I got the debug from one of their browsers, and it looks like it is hanging here:
if (ie[0].match(“MSIE”)) {
I’m very new to jQuery so I’m hoping you can help me out. Thanks!
-
Much appreciated. I am facing this other problem with IE where the preloader rushes to the end without actually preloading all the images? Any hints as to what might be causing that?
-
This lib works for my site but with one small error – it loads content once and then it excutes pre loader. what can be the possible reason ?
Thanks
-
Hello friend,
Gr8 work, done.
i am doing a project, but this is not running in my website, see
http://makemycreative.insomebody tell me plz..
Regards
Yash
-
thank you a lot bro, is a really amazing plug-in, this is what i am looking for
-
Is the “IE is null” issue ever going to be answered?
-
Hi,
Thanks for your plugin. I have only a warning in IE8 :
HTML Parsing Error : Unable to modify the parent container element before the child element is closed (KB927917)
If I desactivate your plugin it works any idea ???
-
Hi,
I have this loading bar working fantastic in IE but when i view my page in Opera or Firefox it freezes at 95% and doesn’t show the page
Really need urgent help
Many thanks in advance
Matt
-
is it possible to insert an image in to this? possibly also delay the start to be able to give enough time to see the image.
-
This one rocks ! Easy to implement. Works fine in FF. In IE7, the content appears first and goes off in a flash with the pre-loader coming up. Still trying to resolve this content flash ! any ideas suggested ?
Matt,
If this freezes in FF at 95%, check your CSS/HTML for any image url attribute which may be pointing to an image which doesn’t exist
-
Husky,
Modify the queryloader css, QAmt with background image option.
-
Orgoa,
Replace the code which detects IE in ieLoadFix function with this bit and you shld not see IE is null.
if($.browser.msie) {
….
}Hope Jquery is using $ else use the no conflict stuff.
-
Hey Senthil, Thanks for the comments and solutions! I think I’ll be update the script shortly with the fixes you’ve given!
I’ve tried to ignore flash objects, but they are sometimes hard to detect.
Thanks again!
-
Gaya,
The flash bit (not a flash object !) – the screen spits the content first before the spawnloader comes to action which is visible in IE !
Try putting an alert before
QueryLoader.spawnLoader();
and view it in IE. You can see what I meant.
I overcame this problem using appropriate CSS viz. hiding the content until animate loader is called where i have placed
$(QueryLoader.selectorPreload).css({visibility:”visible”});
Also, in your next release you can use the following to kick out IE6- browsers !
if(($.browser.msie)&&($.browser.version.substr(0,1)<7)){
return false;
}There can be a better solution but this fits the bill for me to move fwd in my project.
-
Thanks Gaya
this ia a really good project
-
This is the biz-niz !!!
-
Thanks man! This is brilliant.
Used it on my soon to be new website.
http://www.artelix.nl/nieuw
-
Everything works great. Thanks
-
Thanks for the script!
Any way to make the pre-loader only animate once?
I don’t want to see it every time I go to my home page…Any ideas?
Thanks in advance!
-
Looks nice.
1. I wish it could preload JS files as well
2. There’s a problem in IE8 — if I navigate to http://site/folder/ IE throws an alert (“unable to open the Internet site….”). If I hit “refresh”, it loads it just fine. No such problem in FF..
-
Nice…but i have one question. Does it work with an iframe on the website? At least not for me, but I am not clever one with jQuery..
-
hi Gaya,
Thaks for your work..!
I still have this problem : “IE is null”
I’m not a jquery specialist so…it’s little hard for me!
I’m using soundmanager on my site, rollover menu and slide effect…maybe it’s too much?!!
anyway, if you’v got the solution : it will be a nice christmas present!!
Here is what i’ve got in firebug/firefox :
ie is null
anonymous() (line46)
queryLoader.js() (line41)
if (ie[0].match(“MSIE”)) {\r\n (line46)
Thanks for help
-
I’m working on a project. I wonder if is it possible to make it load only once?
-
Is the script open source?
-
Hey there,
wonderful stuff, I wonder if this could work with $(“#whatever”).load ?A photo gallery, for example, might trigger a .load when the user clicks on a photo category, something like
$(“ul#photo_categories li a”).click(function(){
load_url=$(this).attr(“href”);
$(“#photos_container”).load(load_url,function(){
// load callback… QueryLoader might be here maybe? :)
})
})It would be great to have the images loaded through the jquery .load – and make sure the users doesn’t see them until they are completely loaded.
Is it possible? Let me hear what do you think about it
-
Thanks alot, you saved my day!
-
It doesn’t work! I don’t know what do do !
help me please :) !
thanx
-
if the above did not work for you try this found at Web Hosting Talk: http://www.webhostingtalk.com/showthread.php?t=186215
——————————————————————
function showpage() {
document.getElementById(‘loader’).style.display = “none”;
document.getElementById(‘main’).style.display = “block”;
}Some preloading content here
Main Content Here
——————————————————————
see it working at: http://www.painfreepc.com
-
Damn dude, so simply and yet functional. Props!
-
best regards… thanx for samples… perfect code :)
-
I am testing this script on my page http://psdxhtmlycss.com
It works perfectly.
-
how would i use this on a php page?
by putting it in the header.php and the footer.php?thanks for the clean looking script!
-
Hi, I really love this script! But, I’m having the problem a few others are having, where part of the page is showing before the loader kicks in.
I’m running it in a php page, with the loader in the header.php, and the other part in the footer. I can’t figure out the issue.
The website is here: http://www.kilowattsmusic.com/blog/
Any ideas?
-
Hi, and thanks for the useful tutorial.
I apologize me for the grammatical errors, but I write from the italia – using an automatic translator;
it would return Me useful to know whether to bring some changes to the js that allows not to visualize the preload when the elements of the page have already been loaded; of default the effect always departs, also to loading already happened in precedence.Thanks still for any future replica.
-
this loader starts to load in Safari then stops a 96%. what is the porblem?
-
Hey great work.
Someone has solution for this to work with css shorthad backgrounds also ? it expects background-image and so on. Hardly use any of those lately. Would be great if it detect my background:#color url() repeat pos;Thanks
-
@Andrew: I thought that worked. I will look into that some time later.
-
Hi, I get an errror in line 46.
if (ie[0].match(“MSIE”)) {
Said me: Cannot read property ’0′ of null
Can you help me?
Thanks.
-
And how can I change the js, to put a Image Liaging instead the line and a simple fadeOut when finish?
Thanks!
-
muy bueno :)
-
Hi,
Is it possible to not do the animation if it once loaded before ? I see in the demo that it starts at 100% if you reload the page. Thx.
-
Thanks for this great script Gaya.
I got a problem with script. Sometimes I see the page with the unloade images than the QueryLoader shows up and sometimes the script works well. Could please kindly guide me trough this situation. I’ve exactly did the same on your tutorial but nothing changes. This is an ASP page and I am using a database conection and calling queryLoader.js trough another ASP page. But I have tried so many things I directly loaded I changed the place of the script but nothing changes. As I see @Thanksjc had the same problem and couldnt solve …
Looking forward to your reply.Again Great Job !
-
Hello, is there a way to use this with full flash page?
-
Hello,
I have a problem with the preloader. I’m using it in a dynamic webpage. If there is a broken image the loader doesn’t finish, therefore the webpage cannot finally open. Is there any way to force stop the loader in such cases? Thanks a lot in advance.
-
Hello,
Great script. Perfect for a project I’m working on at the moment. One caveat: The script is working for me in all browsers with the exception of IE.
It simply shows ’0%’ and stays there… if you hit refresh, for some reason it then goes to 100% and displays the gallery..
Any help would be appreciated.
-
It working great for me in Firefox but in IE7 the loading frame appears below the content. I mean the progress bar and the black frame appears below the main content instead of appearing over the content of the page.
Is anybody having the same problem?
Great work!!
-
manuel, yes, i have the same problem.
it working in firefox y chrome, but don´t work in ie7 and ie8.
the website charge normally, ignoring jquery.
thanks
-
can someone please tell me in simple-speak, how to adjust the code and stop the site flashing/displaying before the loader kicks in? thanks….
-
Really great idea :) i’m going to use this on my site :) Best of luck
-
Many thanks for this and for your work and great ideas!
-
gaya, don´t work in ie? mozilla anda chrome work pefectly, i don´t understand why not in ie…………………………. heeeeeeeeeeeeeelp me , pleaseeeeeeeeeeeeeee!
;D , thanks
-
Great script, placed it on a page, uploaded it along with the .js files, worked fine except it would not allow a jQ slider on the test page to function. However, for a pre-loader its great. Thanks for sharing I will make use of this. I’m no expert, mostly a novice but enjoy playing around and hopefully learn something to boot. As for it not working in IE – heck not much of anything seems to work well in IE from what I’ve seen.
-
Very Very Nice ! Thx Soo Much !
-
this is the Preloader which can show me that there’s something wrong on the page !, if you guys experiencing stuck on this preloader, it means that there’s something on the page that is not loaded / wrong link or something….
Im waiting for some good improvement in near future :)
ps:
can you explain how to use this vars ?overlay: “”,
loadBar: “”,
preloader: “”,
items: new Array(),
doneStatus: 0,
doneNow: 0,
selectorPreload: “body”,
ieLoadFixTime: 2000,
ieTimeout: “”,kind regards,
good Gaya !!!
-
Hi Gaya, I’m having a problem with the preloader in IE8. It is showing the percentage apparently normal, bu it does’n load all the images of the site.
It seems that the site “http://www.highlevelmedia.es” has the same problem.
Any idea?
Thanks, the script is realy awesome.
-
thanks for the above script, during my implementation, I added some more functionalities, I will host it on google code when it is back online (they are doing maintenance now):
//jquery image loader based on QueryLoader by Gaya Design
//author: jsaade
updates & fixes:
- supports custom arguments no need for external CSS
- can have several loaders/divs being loaded running not limited to only one
- if the div itself has a background-image or if it is an image it is now taken into consideration.
- resize when window is resized.arguments:
- the id of the div, if not defined it is set to the body
- the color of the overlay that should hide the content while its being loaded
- an object defining the options to be used:
- overlayColor: hex
- userCallback: function to be called when the loader is done
- showProgress: true/false
- showProgressText: true/false
- progressColor: hex
- textColor: hex
- textSize: in px
- loaderPosition{top%,left%} => repositions the loader according to the overlayNB:
- if there is a flash element, its wmode should be set to transparent, else it will be visible ontop of the overlay (might fix it using js soon).
- make sure the div you are loading is visible else, its dimensions won;t be correct.Usage Example:
1-
var loader= new Loader(“#content”, {userCallback:showContent, showProgress:true, showProgressText:true, textSize:15});
loader.Start();2-
var loader= new Loader(“#content”, {userCallback:showContent, showProgress:true, showProgressText:true, textSize:15, loaderPosition:{top:20,left:50}});
loader.Start();the object has a Start fnction actually start the loading process.
it will get all the images and background images, add them to a hidden div and after
they are all loaded, call the doneLoading function
-
-
Thanks for sharing Joseph! Will spread the word :)
-
Link to the .js that has percentage numbers should be http://www.gayadesign.com/scripts/queryLoader2/qL2.zip
-
Just curios, is there any kind of license for using this script?
-
is there any possibility to add a cookie after the loading has been done ?
-
I really like this script and seems to work well in Firefox but, in IE, Chrome, and Safari it appears that the page loads for a second and then the overlay, then the progress bar… my site is not graphics heavy at all but it seems to defeat the purpose to load the page then the overlay… check it out http://www.cameronstreet.ca
-
Hi,
Sorry to be a pain in the ass, but I followed the instructions and it doesnt seem to work correctly on my site. The link is here:
http://zombiemod.com/sm/home.html
It just displays a black page. Can you let me know what is wrong?
-
Is there a way to just preload a page’s content and display it as quickly as possible without the preload animation? I just don’t want my viewers to see the pages building. Once everything is cached, there’s no problem. It’s just on first load where the building occurs.
Thanks,
Dusty
-
very nice script!
i probably recommend not to preload the whole page (if isn’t a gallery page, lol), i suggest just a div only :D
QueryLoader.selectorPreload = “#diviWithImg”;
QueryLoader.init();
-
@Scott
it depends on your code, make sure the is not falling inside a div code by mistake.
In addition, what you can do is display the overlay manually on the page before you do anything. then hide it when the loading is done.
-
Sweet, very handy
-
this is just awesome,now my pages can be loaded a bit faster.thxn a lot
-
I had a look at your demo. What I don’t understand is that if the call to initialise the preloader comes just before the closing body tag, how does the preloader do its thing before the pages/images load?
-
thanks @JustinSainton. Your solution to move the Google Analytics code into the header worked great. Got rid of that “1 second” flash before the loader starts.
@Gaya you should really include this into the intro to the article.
-
why i cant just load the page at all just it stops to the 80 % ore something like this :S:S
-
the function ieLoadFix, gives a js error on mozilla, update the if statment to:
if (ie[0].match(“MSIE”) && ie != null) {
and the error will not popup.
Great script man! Good Work! Keep on going!
-
Looks awesome! just have a minor problem in Safari. It only loads to say 70% then just stops. Did anyone encounter this?
-
A nice & cool find for myself. Thanks mate.
-
Is it just me or does it not load properly in IE8? The demo runs the progress bar and then when the page loads not all the images are loaded. Working perfect in firefox though. Any thoughts other than IE is junk?
-
Used on my website it works perfectly ! Thanks !
-
Why does it reloads on my Php-site each time i click to an internal link????????
I love this but i cant use it!
Any help?
I thought i preloads one time ?
-
I really don’t understand why it does not work. Could anyone look at the (simple) source and help me?
The page was working fine until I inserted the script. I now get an error message.
Many thanks for your help
-
I am using galleria jquery. It seems both are not compatible. Would you know why by any chance?
-
Sorry Gaya, but It gets stuck at around 95% in Chrome
-
Be careful when preloading images with parenthesis in their names, the script has a replacement pattern for them and crashes !
-
first of all: thx for the loader … it works perfectly for me.
now, i’m trying to implement the logo of my icehockey-team under the loading bar. problem is: i’m not used to java script & jquery. so, now i’m stuck on positioning …
can someone help me?
here’s what it looks like right now: http://www.huskies-eishockey.com/loader
(i want to preload sth. else later on, of course ;) )
-
Thanks for the preloader. Got it to work nicely as you designed it. I want to change one aspect of it but don’t understand which variables to look at. My site has a centered wrapping division which contains all other content. I would like the progress animation bar to be restricted to this wrap div. Is this simple?
-
I think it doesn’t work in IE. It just simulates loading.
I’ll check If I can do something
-
The plugin, don’t work, i copy all the script and don’t make it works
-
Gaya,
Well done on the script! I made a small addition as we were afraid our users would not know what the slowly moving white line would mean :)
Inside the spawnLoader function I added:
QueryLoader.loadMsg = $("Loading...").appendTo($(QueryLoader.overlay));$(QueryLoader.loadMsg).addClass("QLoaderMsg");
$(QueryLoader.loadMsg).css({
position: "relative",
top: "50%",
left: "10%",
width:"100%"
});And some css to boot:
.QLoaderMsg {
font-size:36px;
color:#ccc;
}Works a treat! Was able to add to the project in under 10 minutes!
-
Not working on the iPhone browser on the doneLoad: @ remove() function. Any ideas how to clear this on iPhone?
-
In you instructions in step 1 you say:
12
3
Remove the jQuery part if you have already included the file.
I dont know what part you are saying to remove if you have included the file. What file? Do you mean the files in the zip folder and download them to server or what. Thank you very much Jerry
-
I found the settings from my question above to contain the preloader in a centered div on my page.
in the var section:
selectorPreload: “#mydivision”in spawnloader set top and left to “0px”
Now I want to use the preloader on a page that has a js slideshow from Guillrmo Rauch (http://devthought.com/projects/mootools/barackslideshow/) but cannot get both to work. The slideshow runs but the preloader will not. Is there a conflict between mootools and ajax?
-
Many thanks for providing this code. I would like to use it to preload large .flv files that are in a separate directory from the HTML page, and which get played by certain mouse events that occur on the HTML page. Could you suggest the changes that would be necessary to do this?
Thanks again.
-
First off, I would like to offer my accolades for such a beautiful and useful script – bravo and thanks!
I am trying out the version that displays a percentage, and it only appears to change every 25%. How would I modify the script in order to customize, or even change, the interval at which the percentage/loading bar updates? I have intermediate jQuery knowledge and cannot seem to figure this one out. Thanks for any help!
-
HI, this is wonderful, thanks! Just a question though – is it possible to have the preloader only load once on each page? Currently it loads each time, even if the page has been clicked already?
-
Hi. The first of all I would like to thank you for this script. It’s great! I Have question about customization. Can I change the loading view by a CSS or I have to read about jQuery? E.g. I would like to put there logo of my site?
Thanks in advance.
-
Hi, Great plugin. I was wondering if anyone was able to fix the quick content show then preloader initialization bug. If so, how should I modify the code to fix this?
-
Greetings:
First, I thank you for share this.
I would like to know how to pre-load my Web page just the first time the user lands my Web page.
Again: Thanks a lot.
Merlyn Moreno
-
I think i might understand the problem with the pages failing to load(stuck at 95%,97% etc). The expression on line 205, 211:
(100 / QueryLoader.doneStatus) * QueryLoader.doneNow
is really a ratio of current/total converted to a percentage. I soon noticed. In all my page it stops at total-1/total. When the value is evaluated current/total > 99, it stops at some percentage unless you have more then 99 images.
I can’t find the missing 1 from total-1/total in all the counters and references. I simply added +1 to QueryLoader.doneNow inside those two expressions.
Someone who understand this stuff better should confirm it; I hope this helps and would love some feedback.
-
Great work. Easy to follow. Thank you for sharing this. More power!
-
Has anyone been able address the initial brief content shown then preloader begins. I think maybe the best way would be to create a div that overlays everything, then hide the div when the “doneLoad” function runs. I’m not sure that this is the best way to fix this problem, so any advice would be greatly appreciated. I am addressing this issue here because I have read many comments above asking about a fix for the same issue.
-
Wow! Was looking for a jQuery preloader and stumbled on this. Awesome stuff! Works perfectly in Safari, Firefox and Opera 10.10 (Mac) Congrats!!
Only couple of issues:
1) Overlay doesn’t cover about 100px of the landing page at the bottom of the page in Opera 9.27 (MAC) Should I care? Hmmm
2) Also, I’d like for the preloader to load only once on the landing page. Any suggestions? Would the the ‘stop()’ line work somewhere in your code?
Thanks!
-
Thank you for this usefull script !
-
how to make the preloader percentage visible?
-
HOW TO MAKE THE PERCENTAGE VISIBLE ?
-
Wait, wasn’t anyone thinking about what happens when you go to another page from a site’s menu? Every time you click on something from the menu, the site would “preload” again.
-
Exactly what I was looking for! That’s perfect for the new project we are developing here on our office.
Greetings from Brazil!
-
I love this! It works perfectly in Firefox, my main problem is that it doesn’t work in any IE.
In IE 8, it acts as though the preloader is working over my loading website, but both are showing at the same time. I’ve tried and tried to figure it out, but I’m amateur in my skills. Can anyone help me at all?
http://www.corinnekrogh.com/home.html
I would love for it to work in at least IE 8 like it should!
-
Hello,
I needed something like this because my page has to load 96 fonttypes (.ttf & .eot) and that can take a few seconds according as which browser is used. IE loads them all before he needs them, FF loads them on the moment the type is called.
Now, I have the thought that the QLoader only starts when everything is loaded iso when the page starts loading !?Yam.
-
Hi, thanks for the plugin.
I read all your comments, but i still have de “ie is null” error.
Can anyone tell me how can i fix this?Thank you.
-
Many thanks for great script!
Does anyone know how to place image – for example logo – additionally to preloader? It would really help. Many thanks in advance.
-
At the risk of adding redundant information here’s my fix for the quick flash of content before the beautiful and amazing preloader kicks in.
The basic problem is that it takes time for JavaScript to run so the basic solution becomes to add pure HTML/CSS that hides the entire website and THEN remove those additions through jQuery. That way you’re guaranteed that the preloader can start running without any visible delay.
So I just added this rather ugly but reliable solution:
HTML and CSS:
.loading { position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; z-index:100; background:black;}
.loaded { overflow-y:scroll;}And then the jQuery to remove the preloading stuff:
$(‘body’).removeClass(‘loading’);
$(‘body’).addClass(‘loaded’);
$(‘.loading’).fadeOut(“fast”);Unfortunately it doesn’t work to change “overflow” with jQuery in some browsers. Scrolling kicks in fine in Firefox but the scrollbars don’t start showing. It’s fine to skip the overflow:hidden property switching altogether though, but then the user could scroll down and see some content at the bottom if your page is longer than 100%, which it usually is. Possible fixes to this?
-
Thanx for this great script.
Just a quick note :
On
“while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
QueryLoader.imgCallback();
} "I replaced the "while" with an "if", cause in IE it loaded before it actually finished loading images, and I cant really get the use of while, when you have a setTimeout to run this now and then to correctly update the loading in IE.
-
I just added the script to my web page and it looks and works great except its stopping all other *.js to work.Here’s the temporary link to the site https://dl.dropbox.com/u/2889697/web/Copy%20of%20index.html Please help me!Thanks!
-
Hello and thanks for this great plugin.
I have a site with 3 main sections, each within a folder containing an index file. I’d like to include this script on each of the index pages. Hover, this script only seems to work on the first “index.html” to appear in the site folders.
Any suggestion?
Thanks again.
-
@Carl can you explain a bit more your fix? thanks!
-
Props to you.
-
nice script! :)
Thanks for this! :D
-
FOR ANYONE HAVING PROBLEMS WITH AN INITIAL WEBSITE “BLINK” BEFORE THE JAVASCRIPT INITIATES…
@Carl has a good fix but he should have used double-quotes instead of single quotes in the queryLoader.js file:$(“body”).removeClass(“loading”);
$(“body”).addClass(“loaded”);Plus, the solutions too long. I did the following:
1) In my working file, I surrounded the section I wanted to load with a div and added the working class titled “loading”:– >[Some crap that needs to fade in.]<–
2) In the queryLoader.css file, I added the following:
.loading {
display:none;
}
.loaded {
display:block;
}
3) In the queryLoader.js file, added the following right before the “end animation” (probably around line 171):
$(“div”).removeClass(“loading”).addClass(“loaded”);
-
FOR ANYONE HAVING PROBLEMS WITH AN INITIAL WEBSITE “BLINK” BEFORE THE JAVASCRIPT INITIATES…
@Carl has a good fix but he should have used double-quotes instead of single quotes in the queryLoader.js file:$(“body”).removeClass(“loading”);
$(“body”).addClass(“loaded”);Plus, the solutions too long. I did the following:
1) In my working file, I surrounded the section I wanted to load with a div and added the working class titled “loading”:– >[Some crap that needs to fade in.]<–
2) In the queryLoader.css file, I added the following:
.loading {
display:none;
}
.loaded {
display:block;
}
3) In the queryLoader.js file, added the following right before the “end animation” (probably around line 171):
$(“div”).removeClass(“loading”).addClass(“loaded”);
-
Only problem. If a visitor is not running javascript they get a blank page..
-
FOR ANYONE HAVING PROBLEMS WITH AN INITIAL WEBSITE “BLINK” BEFORE THE JAVASCRIPT INITIATES [WITH JAVASCRIPT DETECTION]…
1) In my working file, I surrounded the section I wanted to load with a div and added a class titled “loading”:
window.onload=function(){
document.getElementsByTagName('body')[0].setAttribute('id','main-body');
}-- >[Some crap that needs to fade in.]<--
2) In the queryLoader.css file, I added the following:
.loading {
display:block;
}
body#main-body .loading {
display:none;
}.loaded {
display:block;
}
3) In the queryLoader.js file, added the following right before the “end animation” (probably around line 171):
$(“div”).removeClass(“loading”).addClass(“loaded”);
-
Hi there, I’m trying to use this script for a new project (www.flare2010.com) but it’s failing at the 60-70% mark. I’ve double-checked for broken images but can’t find any.
Please advise? Many many thanks in advance.
-
Hey can anyone please tell me that after applying this method as required, sometime before the script few images started loading, then the effect appears and then the full page appears. everythings fine but why few images started showing up ‘sometimes’ before this effect….?
-
Hi there can i am trying to test the loader script in word press page PHP any help be welcome thanks .
i have insert the scripts in header php and the rest of the code in footer php but not luck….
-
Here is what I did to fix the issue in IE:
(no need adjustments to the QueryLoader)Add code to your section:
————————————————————————————–
//<![CDATA[
/***********************************************
* Description : IE Loader fix
***********************************************/
function func1() {
document.getElementById("loading").style.visibility = 'visible';
}function func2() {
}function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}addLoadEvent(func1);
//]]>The only issue is if javascript is disabled the page doesn’t display, but you could in theory fix that with a php file and/or a iframe.
-
<!–
-
kewll nice post , its works awesome thank you :)
-
I can not figure out for the life of me the problem im having. it displays correctly in ie , but not in firefox.
if (ie[0].match(“MSIE”) && ie != null) { <-giving the error
if i take out
it works fine in firefox, but i cant do that and preserve the layout. Thank You.
-
table width=”1020″ height=”1021″ border=”0″ cellpadding=”0″ cellspacing=”0″ align=”center” background=”#000000″
if i take that out it works.
-
My webpage http://www.webplaza.in only loades 75% and then stop screen remains black and doesnt happens. plz help.
-
Hi i would like to use queryloader to preload a flash game (swf file).It’s that possible?i tried but it doesn’t work at the moment.
Can u suggest me any solution?Thanks.
-
Hi guys,
Anyone have found a fix for use queryloader along the scrollTo plugin?
On firefox and chrome i’ve no problem but on IE the loader don’t start immediatly and for some seconds you can see some elements of the site.
This is very annoying and i’m scratching my head for a working solution…
-
Hey, its amazing howlong this thread has been going, but its such a handy bit of code, I’ve just been having the slight problem of it not being the first object displayed, its the last code entry before & so I can’t see what is going worng… anyway thanks in advance (on the website)
-
Hi there
It is indeed a really nice tool… But your explanation might not have been so good, sorry.
Is it able to load everything? Javascript? CSS? doesn`t it have any uncompatability that can prevent it from working?
Because I followed up and down your implementation guide and my screen remains black (as set to be the background color in the css file).
nothing happens.
Any help?
Thanks in advance
-
Thanks a lot for this code, it’s really nice and useful. C’est un bijou, j’adore !!!
@Gespinha: I think it does not load the images of the CSS included. Personally I included in order to preload those images. But if nothing happens, that means you did not included succefully the CSS file and JS file (maybe you made a small mistake with the link?).
@Bunty Jorwal: Could you create a temporary file including the script ? I bet it’s because you are not patient enought.
-
It is awesome. I just probe it in my website and I like very much
-
@Nick H, it’s not working in IE 6 – 8, or maybe i mistaken put the code, where to put the code anyway? in queryLoader js file?
thanks
-
Wow, this Thing is very cool, thank you for this great Idea.
It´s absolutly Useful and Nice. So i can Preload an greater Background Image without a few seconds delay from the other Elements of my Page.Thanks a lot for the great Work!
-
Great! Great! Great!
-
Thank you so much !
I just woke up my bf noisily to show him the beautiful thing
-
Thanks for the Loader!
I Just had a quick question, im relatively new with Javascript. If I wanted to display a logo after the Preloader is finished, and then load the page. How would I go about doing that??
-
AWESOME!!
unique preloader!!thanks a lot!!!
-
This is great work.. thank you so much for sharing!
-
Back again with a question. I’ve added a “page loading.gif” animation as the background for the “.QAmt” div. I want to make sure it loads first so that it gets displayed while the other 40ish images preload. I put the queryLoader CSS at the top of all my CSS hoping that the browser sees that first.
In the script “QueryLoader.items” is an array containing all the images to be preloaded. Examining it’s contents shows that the page_loading.gif as the very last item in the array. Do the images in that array get downloaded loaded in that order? I inserted some code to rearrange the array so that the page_loading.gif is element 0. Is that accomplishing anything?
Thanks again for a wonderful script, i just love it!
-Scott
-
I have a conflict between the script id “featureCarouse” that look in my rage achala pq source code of the div content is loading normally and and not a background image in the tutorial speaks more to put the id that I want to upload to the oloquei carrousel and not uploaded ..
-
Tried to use the percentage visible version but it just looks like the standard version. Checked out everything to get it to work. Noticed when I download this version I get jqueryLoader.zip not qL2.zip. Does link point to wrong file. Would love to get this to work as I love it.
-
I made something similar. Coming from a Flash AND (X)HTML jQuery background I wanted something that really reflected my Flash package. You can check it out here: http://www.edwardhotchkiss.com/blog/jquery-javascript-preloader/. Nice work man.
-
Great script, works beautifully. So easy to implement.
-
@ permalink, the link does point to the wrong file. just had this issue myself. I got the correct js and css by opening the demo and copying the source code.
I still cant get mine to work. the loader won’t show up untill most of the page has loaded and keeps crashing in IE (more so with increased cfquery results). does anyone know how to fix this?
site: http://www.cocoonfurnishings.ca/search/indextest_D.cfm?description=table
-
*@kit (oops)
-
Sorry, but QueryLoader don’t work….
-
Hello, i’m testing QueryLoader on my website. I’m using different jquery plugins on it: jFlow, QueryLoader and Fancybox.
Queryloader works great on safari, firefox and chrome but gives me some problems on ie8 (the loading animation appears after the elements of the page!)
you can see the website here:
http://www.tenutavaldorso.it/home_ita.htmAny suggestion?
Thank you very much and a lot of compliments for your great work!!
Eli
-
Seem to works at a lot of sites. But I can’t get it done. I use Joomla CMS with an simple home made template. Any got this working on a joomla site?
I putted the code in the index of the templae, and putted the file in the root of the template. I changed the pathway in the code in the head to the files. But it doesn’t work, I have no errors… I seems it isn’t there at all…
-
Finally got it working on IE and FF, but not in Safari. But now it takes more time to load te second page and further. And some other javascript seems to be bothered with this script. My routeplanner (pow. by Google) doesn’t work any more etc…
Not the best working option for a cms like Joomla, but it might be the prettiest though… Can’t say the problems aren’t caused by joomla…
-
Bu yıl bayram alışverişleriyle birlikte başlayan okul alışverişleri velilerin keselerini zorlarken, okul çantalarının fiyatı geçen yıla göre yaklaşık yüzde 20 arttı
-
It freezes at around 90% for me. I tried both the original script and the percentage one – the same thing happens. Also, it doesn’t appear to hide the content to-be-loaded because I can see the content while it’s being loaded.
I’m using iframes but even when I view the inner frame where the script is implemented, it still doesn’t work the way it’s supposed to. :(
-
Nevermind! Turns out I had linked to some images that didn’t exist. After taking those out, it works! But I also found that the script would not do anything unless the content had at least one image.
-
Great work!
Just a little issue I had in FF (line 46):
if (ie[0].match(“MSIE”)) {
it throws a JS error “ie is null”;It can be easily fixed, simply checking if ie exists:
if (ie != null && ie[0].match(“MSIE”)) {hope this can be useful.
(and sorry for my bad english).
-
It works like a charm beside IE7/8 :(
In IE the preloader skips suddenly to 100%, the page appears but all the stuff is still loading…Any fix for that? Test Page: http://olgaswiderska.vot.pl
Rocks in Chrome/FF/Safari/Opera but not in IE.
-
Gaya my mistake! Everything works fabulous now!
I made small mistake modifying your QueryLoader.items.push(url) queue to add manually dynamically created images.Thank your very much for your great effort doing this wonderful piece of code!!!
Cheers
-
Ok, unfortunately fixing my mistake wasn’t enought.
I had to modify the code to fire QueryLoader.ieLoadFix() only once when preloading last image from queue.Maybe someone finds it helpful:
i removed setTimeout for calling ieLoadFix() and add to imageCallback() at the end:
if (QueryLoader.doneStatus == QueryLoader.doneNow+1) QueryLoader.ieLoadFix()
-
Hey guys,
I wanna ask u how to use this script in a div. What I mean:
Im making a webOS and i need such script for the browser. I have to make the script thinks that the div with id #myBrowser is my real width. It goes fullscreen. Not working with QueryLoader.selectorPreload = “#myBrowser”;
Any help appreciated.
-
Hi Gaya,
is there a way to control the margin on the left and right of the *loadBar* ?
a way for the *loadBar* not to be 100% wide ?
-
thanks,
baa.
-
Hi there
Great tutorial… Really mastering the jquery preload system. But still too raw.
Doesn`t have a very wide range of customization.
Aplying this to a web site would simply make the number of web déjavus grow.
Anyway, its fantastic.
Thanks ;)
-
Hi,
nice preloader.
-
Good job. thanks fol all. :)
-
good !,but the CSS can not edit
-
I followed your tutorial and I can’t seem to get it to work. I took the #3 code you give and put it in head tags section. Then I took the #4 code you gave and put it just before the end of the body tags. Then I wasn’t sure what you meant by remove the jQuery part, so i removed this line of code:
from #3. Then I downloaded and unzipped the files from #1 and put the queryLoader.css file and the queryLoader.js file in same folder as my updated index.html file with the code from #3 and #4. I went to my webpage and it still loads the same way it did before, no loader or anything is visible. Can you help me with this? Thanks for your time.
-
sorry the code didn’t show up in my previous post but it was this part,
from <script type right to
-
k well didn’t show up again so the first line of code from #3 lol is what i removed.
-
queryLoader is responding differently for the same code depending on which server it is hosted on. I’ve been having problems using queryLoader with IE8 on a new site i’m working on where the loader displays but finished the animation long before the images are done loading. After hours of trying to debug I uploaded the whole site to a different server in an act of desperation. It still isn’t responding as expected, but it certainly is responding differently between the two servers using identical code and images. I’ve simplified a single page for testing purposes:
http://design.metrolightingcenters.net/wtf.htm
http://jugtones.com/design/wtf.htm
Again, those two sites are on completely different servers. Can anyone help me understand why this isn’t working properly in IE? I have another site that I use queryLoader on and it works perfectly in IE, but I can’t for the life of me figure out why it doesn’t work in the links above.
Thanks for any advice, you can offer,
-Scott
-
It’s fantastic plugin ! Thanks from Poland ;)
-
Awesome!
Thanks.
-
Well,I’ve tried this QueryLoader and it’s worked but I couldn’t find it as my expectation.I have no found any load bar and percentage on it….
Is there any script should I edit?
-
Susan, read the first part of this page. It took you longer to post this question than it would have to just read the extremely short bit of information posted on this page…
-
Susan, my appologies. It seems that the link pointing to the “percentage visible” script is linked to the wrong file (queryLoader.zip instead of qL2.zip). However, if you go to the example page for the “precentage visible” script the download link is correct there.
-
Ok, here is my fix for the IE load problem. None of the fixes posted above worked for me, but they helped me understand what was going on. Hopefully this helps some people. All the changes take place in the ieLoadFix function. I changed the “while” to “if” and then reset the timeout. Here is what the function looks like after the fix:
ieLoadFix: function() {
if(jQuery.browser.msie){
if ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
QueryLoader.imgCallback();
QueryLoader.ieTimeout = setTimeout("QueryLoader.ieLoadFix()", QueryLoader.ieLoadFixTime);
}
}
},
-
Thanks for the great plugin!
Just a note, it stops with the CSS3 background gradient code.
ie: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#666666), to(#ffffff))
-
Just curious if this would affect SEO in any way, or if anyone using this has seen a drop in SEO?
-
Hi, It doesn’t fade like it does in your example. It just turns gray after loaded. Question: Does the z-index of the things on the page matter?
-
Well, it turns gray then dissapears. I want it to fade out?
-
Hello. I used the query loader for my site and have recently been infected with malware. Has this happened before? Any suggestions to avoiding this problem? Here is the code that is being quarantined by Google:
document.write(”);
Any idea on how this code can find its way into my source code?
Your timely response is much appreciated!
-
document.write(”);
-
Thx! i’ve been looking for a good solution…
..should be replaced by a bar on the rotating arrow
-
Good script, but have a problem. Befor loading i see bg and text of my site. after that preloader start work.
you can see here: jquery-templates.com
-
Good script, but have a problem. Befor loading i see bg and text of my site. after that preloader start work.
you can see here: http://www.jquery-template.com
sorry for the first post – wrong link :)
-
yah same problem, i thought that it was a Cash img but emptied cash and still have problem.
-
Hi! Great script!
Is it possible to exclude only one element from the preload?
Thanks a lot!
Ste.
-
I love the plugin but was wondering if someone could help me out. I place the plugin on my site but when I make the site live it doesn’t seem to work.
My site is:
If someone could please take a look at it and help it would be much appreciated. Thanks
-
Your script code is in the wrong place.
Place this code:
QueryLoader.init();
right before the closing body tag , and not where it’s currently located.
Hope this helps.
Cheers.
Ron
-
Thanks for the response. I put the code:
QueryLoader.init();
right before the body tag and still no luck. Any other suggestions?
Thanks again,
Mike
-
Love this script!!
Thanks so far!
And maybe…
Anyone knows how to tweak it to keep the height and the width of the loader up to date.. or real-time..
Has a bug while resizing during the loading process
and on mobile phones.
Which on first visit gives a smaller width and height than the actual page..
-
I found the issue.
Make sure there are no broken image links in your code or the preloader won’t load.
-
One problem, possibly my hack:
When using a css background colour on the container element the loader fails to run the animation?
This script is amazing but please help!
-
this shot not works. It’s a lost of time.
-
Hi, great script .. I used the loader bar with the percentage counter. It works great in all browsers except IE7. what is happening is that the loader do all the animation of the “doneLoad” function while there are some page elements are not loaded yet. I’m using some kind of page scrollers so the site animate to the target div (which I call at the end of “doneLoad” function) before the full loading. any Ideas for this type of issues.
Many thanks for your effort
H.Sobhy
-
Change line 163 from top: 0 to top: “0%” to fix the ending animation on chrome.
-
I see this question asked above too but never saw an answer to it (maybe it’s not possible?). Is there a way to not play the load bar animation if the page is already loaded in cache). Would be better if page just showed.
-
Its always good to learn tips like you share for blog posting. Thanks for your high quality work and keep on writing articles in such a high quality manner. – There is always room at the top. Daniel Webster 1782 1852: on being advised against joining the overcrowded legal profession (attributed)
-
I applied this script only to one page of my site. In most browsers it runs ok, but in Google Chrome in jscript console say:
jquery.min.js :19 Uncaught Syntax error, unrecognized expression: ))}
What can it be?
-
Seems to break with jquery 1.4.4 The loader is stuck at 95% giving ie is null error. Using jquery 1.4.3 it works perfect.
I’m using it for a jquery animation/game preloader. Check out the facebook fanpage “KilledByThejQuery”.
Thanks!
-
It’s not nicely done. If you don’t have any image to load, it gets an error. If you use the url of an image that doesn’t exist, it gets an error.
-
Hi,
First of all, You have done a great a job with this plugin, congratulations.
I’ve got one problem. I set a background image in QOverlay class – it is a website logo – and currently it appears extremely delayed when the site is being preloaded. So how to make the background image be from the start of QueryLoader?
I’d be grate full for some piece of advice.
r.
-
hi,
if queryloader stops at 70, 86, 90% or something else, you can fix this problem:ieLoadFix: function() {
var ie = navigator.userAgent.match(/MSIE (\d+(?:\.\d+)+(?:b\d*)?)/);
if (ie != null && ie[0].match(“MSIE”)) {
while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
QueryLoader.imgCallback();
}
}
else {
while ((100 / QueryLoader.doneStatus) * QueryLoader.doneNow < 100) {
QueryLoader.imgCallback();
}
}
},
-
Thanks dp that does seem to work!
To get it to work you just need to replace the original ieLoadFix function in the queryLoader.js with the code dp posted.Tested in chrome and firefox with jQuery 1.4.4
-
I tried to apply what you wrote her, my page started loading better, but in some browsers it still fails preloading images, for unknown reason. I found this article and it helped me a lot:
http://perishablepress.com/press/2008/06/14/a-way-to-preload-images-without-javascript-that-is-so-much-better/Simply i’m skeptic about that, because don’t know how it will be affect SEO
-
MANY MANY THANKS!!! It worked like a charm!.. It helps a lot on newbies like me.. =]
-
i want to load a “complicated page” with iframes etc, but i just want to preload one container = a div containing the biggest images, and i put these images as display :none;, result: nothing is preloaded, sad, why couldn ‘t this just work? (when i ommit display:none it works…
…. : .notvisible{
display:none;
}<img src="./images_page/…..
…
QueryLoader.selectorPreload = “#notv”;
QueryLoader.init();
-
I love the idea!
Is it possible to preload the entire page and not just images? I tried your script but I have a sort of flash in the beginning with my website then I have the preloading and then the little animation….
http://www.maudearsenault.com
Any idea how I could get rid of the first few seconds of the view?
-
I would like to also preload a .wav sound file before the page is displayed. Is there way for me to make QueryLoader wait for it also? Perhaps make QueryLoader think that the sound is an image? see http://www.SerenityWineryMO.com. I want the wine pouring sound to play when the QueryLoader is changing the colors on the screen or right as the page is displayed.
-
nakfmcbqhakjkeanhcndighvcblshojgk
-
t is a big contrast to the three
wonderful weddings. Matthew and Gareth’s family are driven to
-
looks cool! I’ve tried changing the background image that shows up when the loading finishes. Is there any way I can delay that image for a good 2-3 seconds before it goes to the page? ^_^
thanks!don’t know much about jquery yet ^_^
-
I think it would be nice to add in the css, inside “QOverlay”, the property “cursor: wait”.
It adds better performance relative to style.
What do you think?by GoogleTranslate hahah
-
Great preloader.
If anyone is having issues with it not working in IE, Scott W’s fix – comment 274 – fixed it for me.
Unfortunately i added a loading image to .QLoader Div but this won’t show in IE until the loading has finsihed.
Apart from that its great.
-
Excellent! I did a little change to slightly improve it. I was seeing a bit some html/css elements right before the overlay and the loading would take place and start.
So i set a div #wrapper that takes all the site within the body, set its ‘visibility’ to ‘hidden’ with css and then changed back this value when the whole page is loaded in the $(QueryLoader.loadBar).animate() by adding this line: $(‘#wrapper’).css({ visibility:”visible”}); right after this line: }, 500, “linear”, function() {
Works just fine in IE8/7, FF, Chrome, Saf, Opera.
Thanks for the script!
-
Well thanks for giving out this script, i will try it, as i want a script like this, i hope that i will be able to implement this.
thanks once again for sharing it with us.
take care.
-
To all with the “ie is null” issue. I had the problem too on a page with extra js (supersized gallery on slideshow mode, yeah for some reason, the no slideshow mode works fine with queryloader) and noticed that error with FF/Firebug. I also noticed that it was all working fine with ie8! So i opened the queryloader.js and commented the condition “if (ie[0].match(“MSIE”))” on line 46 (and its end on line 50) and it all works fine. Might not be the best solution though, am no js expert, i’d say that it was there for a reason.
-
absolutely brilliant script, thank you!
-
Hi! great plugin, but i’ve the “var height = $(window).height();” issue, and i can’t work out, on this site: http://www.flormidable.it/
I tried the suggestions above, but, no results.
Thanx.
Giacomo
-
Hi, I saw another comment about the iphone, and it really won’t hide after loading has happened. I was trying different things but to no avail, any thoughts on how to remove it on the iphone?
-
Please plugin for wordpress is time!
-
i would like to use this script !! but is works only in firefox, can’t you folks really not see, i f you do more than a few images on your page, this DOES NOT WORK IN IE !!
i really think this is nice, clean etc, but i would like to use it CROSSBROWSER !!! YES I READ ALL the comments above
please someone find a real fix!!
-
Great loader, thank you a lot !!!, but.. i’m find some problem..
Only in Opera using jQuery 1.4.x, our loader did not finish his work. His freezing just before the end… at 100% )) i think, this is the animate() jquery function.. or Opera… )) really i don’t know ..
But with jquery 1.3.x it works perfectly!Just take a look http://www.nikonov.pro
Unfortunately, i realy need to use the Jquery 1.4 framework
Of Course, 5% of all internet users still using Opera – not so big audience of all internet, but just imagine, that you loader perfectly work at any conditions on any browsers… it’s really cool.
Please help with bugfix…. no, with the new Loader version, or update (:Thanx a lot!
P.S. sorry for bad english )
-
Excelente, quedaría bien en cualquier página.
At. Shuberth Chi Balam
-
a website doesn’t mean that you disregard the footer or anything else below the fold.
-
To anyone that is having trouble with the script freezing at a certain percent. It is due to something not being able to be loaded by the script. If you use Google Chrome or Firebug for FireFox check in your error counsel and see if there are any errors. Here are my findings with this script:
-Any broken links cause freezing
-Some CSS3 Web Gradients cause freezingThe solution?
Gaya gave it himself so I will give more of a detailed solution.
-Open the javascript file for the preloader and find line 59.
-You should see “*not(script)” no quotes.
-Replace with “*not(script, .noPreload)” no quotes.
-Then add the class noPreload to any element that was causing error in the counsel.
Viola!Hope this helps! ^_^ <3
-
VERY NICE TUTORIAL ! BUT ITS NOT WORKING AT ME ! CAN YOU GUYS HELP ME ! I DONT UNDERSTAND WHERE I MUST PUT THOSE SCRIPTS!
-
Great script. Thanks!
Is there a way to limit the max time the animation is shown?
Heavy galleries tend to have a bit too long loading time but it would still be nice to have the pre-loader shown for x seconds.
Thanks!
-
There is a problem with the script recognizing two background images in an element in Firefox. If you have two background images being used in one CSS style using a comma the script wont finish the load.
Can you please look into this!
-
I’ve tracked the issue potentially to this snippet:
if ($(this).css(“background-image”) != “none”) {
var url = $(this).css(“background-image”);
} else if (typeof($(this).attr(“src”)) != “undefined” && $(this).attr(“tagName”).toLowerCase() == “img”) {
var url = $(this).attr(“src”);
}
-
Great plugin! Too many comments to ensure this hasn’t been implemented but I required a callback method to ensure my images were loaded before applying any type of plugin(s).
line 22 (after ieTimeout: “”)
doneCallback:null,line 24
init: function($callback)line 30 (after if statement)
if ($callback!=undefined) {
QueryLoader.doneCallback = $callback;
}line 174 (after removing preloader)
if (QueryLoader.doneCallback!=null) {
setTimeout(function () {
QueryLoader.doneCallback();
}, 800);
}
-
hey this is awesome. i’ve played with it a little and decided to put an image in there as well which looks kinda cool. i was wondering though, where in the JS can i slow down the animation. any help would be awesome.
-
actually i figured out how to slow it done. it was easy enough to figure out. very nice preloader! i’m really enjoying. thank you for posting.
-
Awesome! your plug-in is working for my website. Thank you for share your great smart code.
-
Love this preloader!
Ran into a problem though…
It was working flawlessly and now the 1px line is half the page with no smooth transition. I can not seem to find where I have gone awry.http://blog.donovansmithdesign.com/index2.html
thanks!
-
I think it’s awesome!
I ran into a bug in Opera 11 with jQuery 1.4.4. It didn’t do the animaton, because the QueryLoader.loadBar didn’t have “width” property. So i put 1 line into the animateLoader before if, like this:
….
var perc = (100 / QueryLoader.doneStatus) * QueryLoader.doneNow;$(QueryLoader.loadBar).css({“width”: “0px”}); // 1 line :D
if (perc > 99) {
…..That’s solved my Opera bug with jQ 1.4.4!
Thanks for the code!
-
Sry, it works better with
$(QueryLoader.loadBar).css({“width”: perc + “%”});
-
Hi there,
I tried to use your script for my website, in order to avoid the loading time of the pictures and animation. So far the only page that I tried it on is the following:
phoenixorder.org/welcome.html
For some reason though the loader doesn’t seem to work and the page loads like it usually does. Can someone help me out?
O and I loaded the css file in my css folder, and the js file in a newly created js folder, both folder on the site root.
-
Hi Gaya i have a small problem in preloader its stop on 80% i see your post there you said its not working or searching for data i mean broken links so i want to say i can use it with any broken link?
-
Hello,
I’ve found this link while I was writing my new post, great done hear. I invite yo to see something NEW, bit similar at:
http://bergb.com/blog/creating-progress-bar-using-css-and-bit-jquery
-
This is great. I like the % version, but had to copy the files from your example as the download link did not contain that version.
Thanks for a great preloader though!!
-
Good concept, I might give this a try.
-
I tried this and it worked great – but then when I added my html password lock code the script didn’t work any more – is there a way round this or does the html password lock code interfere with the script?
-
This is great work.. thank you so much for sharing!
-
I made some pretty essential changes to the original preloader. I added an onLoad callback parameter and updated the CSS of the load progress text field so that things are aligned centered, properly. Heres the link:
http://code.google.com/p/ascensionsystems/downloads/detail?name=queryLoader.js
-
I have a question – how can I get sequential preloading process in IE if I use window.onload event instead of doneLoad function. It works in proper way in all browsers except IE. In IE progress bar dissapear very quickly and after that not all images are loaded.
-
very awesome!
-
Hello!
It works like a charm, but I’d like to specify a callback-function when the loader is ready. I need to do stuff after the images is done loading, and I don’t think that modifying the doneLoad is a good thing.
-
Thanks for this great article. I’ll be testing this to my new launch website: http://www.affordablecebu.com – keep sharing more. We love your site so much.
-
Hello it looks Amazing !
But it dont works normaly on my web site , the line comes about to 75 % -90 % and then all freeze`s , nothing moves anymore .
And i dont know where is the problem .
I saw in one post up @Gaya sad :
“there seems to be a broken image on your site. it can’t be loaded so queryloader thinks it is still loading”Maybe i have the same problem , but how i can know wich image it is ..
Right now i deleted this pre load from my website becouse i need to use it.
Can anyone know how can i find error or anyone can help me about that .
and one thing more , give me the link where to download the most beautifull query preload :)
Thank you very much , you can write me to my e – mail
spartan_warrior@hotmail.com , or here on comments , i will be online 24 hours per day ;)
-
That is absolutely great work! I have a tiny question. Can I add any exception to this plugin? I want my page to be preloaded except the gallery, cause else, it would take too much time to load. What do I need to write to add an exception to the query loader?
-
its not working for me.it stop at 53%. i follow comment 301 and 302. still not working….wat i do…plz reply
-
Hey Gaya.
I read al posts above and dont figured out, how to use QL with Prototype Lib, if it is desactivated, QL works fine, but i realy need that one working as well…Can u give me a little help?
-
Hi!
i love your project. :)
is their a chance to make the load vertical? im not a pro jquery coder that i can customize it.. i just need a code to make it vertical load.. thanks! appreciate some reply.. :)
-
Thank you very much for this!
First i had some problems but after reading your comments and figuring out with firebug wich images are not loading properly i fixed it and now everything works like a charm! Thanks again!
-
What is the code for using a flash animation instead of loading procent bar ?
/thanks for sharing the script
-
I have a problem with the preloader. Presents this error:
Line 46: ‘ie is null. ”
Thanks for help.
-
I am in the process of redesigning our website. I am enamored with your loader but I have one question. How do I get this to load only once per visit? I looked thru the comments. A few people had the same question but they didn’t seem to get answers. Thanks in advance for your help.
-
hi gayadesign. what a great preloader :) but how to put this plugin on blogspot? i really need this plugin. hope you can reply my question.
thanks
-
Tested: Mac Firefox, Win Fierfox, Mac Safari, Win Safari, Mac Opera, Win Opera, Mac Chrome, Win Chrome, Ie7, IE8 => working like a charm on those.
Tested on IE9: not working. Freezing screen with no bar process…
I know it is still early for IE9 but the fact is that more and more people are downloading it and it means that those can’t have access to my website at all.
If anyone has a clue on this, I would be happy to read it.
-
Great work, man. Really is.
-
And here is your great preloader during use:
http://www.chokitoszepsegszalon.hu/
Thanks for this!!! :)
-
I need help. I can not function properly. The QueryLoader works but when I enter the site see the background and other images before QueryLoader run. What’s wrong. Lagu can help. Thanks. This is the website: http://www.valeconsult.com.br
-
I’m using this on my latest brew for a client and it works flawlessly, I love it. However, the loading in my case sometimes takes a while because this design is a one-pager (if you take a look you’ll see). Is there any way I could add a piece of text that says “Loading…” on top or to the right of the progress bar? Intuitively it makes sense to us as developers, but the foreign owners of this hotel don’t feel the same way. Any help would be much appreciated and thanks for the code, it’s great!
-
Note: It did occur to me that I could add background image to the QLoader element in CSS, but the problem is the image I made that says “Loading…” didn’t load until it was already done loading the rest of the elements.
.QLoader{background:transparent url(‘../../images/loading.png’) right center no-repeat; border-bottom:1px solid #DDD; height:50px; overflow:hidden;}
-
@ Luc
Add this line of code to the top of theif (document.images) {
img1 = new Image();
img1.src = “../../images/loading.png”;
}This code makes sure that your image gets loaded first
-
*top of the head
-
Great script, looks awesome.
Does anyone know if this script pre-loads external javascript files?
Thanks
-
Like the script, however I have a problem applying it to one of pages where I already have jQuery script. I think if maybe due to conflict but unsure how to resolve it. the opening lines in my page already with jQuery script goes as follows….
var j = jQuery.noConflict();
j(document).ready(function() { …..Do I change something in my existing script or make some adjustments to script calling the QueryLoad .init() or do I have to made changes to the QueryLoader.js script ?
Any help would be gratefully appreciated.
-
I really love the way you discuss this kind of topic.*”;*
-
This is a great idea. Thanks for this.
-
Hi,
something like this crashes:
Any advice?
Regards
Thomas
-
Hi,
something like this crashes:
body style=”background-image:url(background1.gif)”Any advice?
Regards
Thomas
-
Code works fine when testing in browser(s) and even on MAMP server, but when I’ve uploaded to the server the preloader will not work! I’ve looked at the code and it seems fine to me. This is the site: http://lalaland-studio.com
Anyone else have this problem?
-
Hello,
I’ve implemented the script but when I access my site, there is a 1 second “regular load” before we can see the effects. Does anyone have any idea how to avoid that ?
thanks
-
Thank you so so so much…. i was trying so hard to get this stuff.. flashh.. i hav tried a lot.. thanxx dude u rockkk..
-
i was using flash but it nvr worked. . but jquery rockdd..
-
how to get %… im not getting that….. HELP/////
-
seems that there is a problem with this script using google chrome(version 10). fade not showing correctly.
-
Thank you, we are happy using it on http://www.livepage.info News website!
-
Hi, i used the script and it works great.. but then i noticed that the gallery of images that i have on the site, stopped to work (the image opens on another window)… and its supposed to be enlarging on the same window… i dont know what else to do… any ideas? im using yoxview – galleria.
please begging for help.
thanks!!!
-
Nice script but not work with multiple backgrounds (css3) :(
-
Nice script.
For all those experiencing an error in non-IE browsers its because the ie variable in line 49 already null. Change it toif(ie&&(ie[0].match(“MSIE”)) {
Also the script only works in other browsers if and only if all the required files are found. It hangs if even one of them is missing.
-
Awesome love this js, inspires me to try stuff akin to apple’s current home page and f1.com’s awesome home page intro.
-
a problem with this script using google chrome(version 10). fade not showing correctly.
-
Thanks for this great script!
A small note about an issue I ran into while trying to adapt it for my use though:
Apparently the queryLoader script will mistakenly identify thebackground:-moz-linear-gradient
CSS tag as an image that needs to be preloaded and will cause the script to hang as it tries to find and load it. This issue was reproducible in Firefox 4, Chrome 10, and Konqueror but did not seem to affect IE8 or Opera 11. The workaround I ended up using was to modify line 62:
if ( ($(this).css(“background-image”) != “none”) {
to:
if ( ($(this).css(“background-image”) != “none”) && $(this).css(“background-image”).indexOf(“gradient”) == -1) {
-
@ Thomas
The script appears to search within the body and will not preload a background-image for the body itself. Switching line 19 from:
selectorPreload: “body”,
to:
selectorPreload: “html”,
might help.
-
hi, i m writing from italy so sorry for my english.-) i have the following problem: the preloader is working nice on the index page (the blue first one) and on the english version “coming-soon” page but not on the italian version page. It arrives to 97% after then nothing happens. I put the codes on point 3 and 4 as u suggest in the same place in the three html pages we r talking about, so I cant understand why is working only with 2 . forwarding ur help.-) thx
andrea
-
sorry i forgot to write that i meet this problem with firefox 4.0 and chrome, not IE also if the background is not uploaded yet when page is opening. I have no problems inside dreamweaver when i try to see how the code is working.
-
found out! it was a &?!!@$$% imagine with first letter uppercase in the name in the folder (Scatola) but not in the code (scatola) grrrrrrrr.-))
-
I am using this to preload an animation. Is there a way to test if preloading has finished so I can then start the animation?
with the default settings the animation starts while it is preloading, I just need to preload AND THEN start the animation.
Thanks in advance!
Ryan
-
I am using this to preload an animation. Is there a way to test if preloading has finished so I can then start the animation?
with the default settings the animation starts while it is preloading, I just need to preload AND THEN start the animation.
Thanks in advance!
Ryan
-
Code works fine when testing in browser
Thanks in advance!
Ryan
-
this is really great script! just a feedback; callback functions would be fine :) anyway after a few customization, i managed to add a callback function when all the images done loading. Thanks!
-
Hello, my meter is going up 97%, found a problem when generating images with PHP using a THUMB.
Thanks!
-
every time someone ask help for use it on wordpress anybody give answer…is impossible to use it on wp???!!!
-
The queryloader utility is resulting in inconsistent user experiences. while I admire the code, it doesn’t seem to present a “true” preloading experience. The reports I have received include experiences that suggest the following:
- browser seems delayed; no activity immediately after entering the url address where plugin is applied
- after an uncomfortable few seconds, the page flickers with content but is immediately replaced with preloader bar
- preload experience completes and page content (that flickered before the loader) loadsI have asked a variety of close friends and family to test this and all have reported this scenario or very similar experiences.
Just an observation. I’m not trying to suggest that the code is bad or buggy. It is possible I have overlooked something despite putting the code in place according to the instructions found here. If you can help, please do. Thanks.
-
i’ve tried upload all just like the tuts, and it did work, but only in FF, its not working in safari, and chrome, always stuck in the last load,. and i also don’t have the percent number, just the loading bar, can somebody help please?
so far,this is the best preloader for html, i just cant figure it out, why i cant not make it work for chrome and safari.
thanx.
-
Hello, very nice work. But I get some problems with it. It works fine until I add in the css, of my web page not the loader, some -webkit-gradient or filter or anything related. It stops at 80 0r 90 % and it gives me this error “ie is null”. What should I do to fix it?
-
queryLoader no longer works with jquery 1.6
View the changelog
http://blog.jquery.com/2011/05/03/jquery-16-released/please fix the code. because I dont know what needs to be fixed
-
hi! nice work
I the script is working with jquery 1.52 but is not working with 1.6 what to do?
-
thanks you, seriously awesome
-
Thanks, I was looking for something like this and wouldn’t spend hours to make it work, simple and effective !
For those who’d only want the tiny line and not the last color fade animation for their project, here is what you have to replace at the end of the script :
//The end animation, adjust to your likings
$(QueryLoader.loadBar).animate({
height: height + “px”,
top: 0
}, 0, “linear”, function() {
$(QueryLoader.overlay).fadeOut(0);});
-
Can QL be set to preload whole web site?
Thanks!
-
Did anyone got this gem allready work with jQuery 1.6? If so, could you probably post the fix?
-
I removed the “if (ie[0].match(“MSIE”)) { }” checking at line 46 and it works for all my browser now. May I know what is the impact?
-
A quick question, since I am unable to test the loader presently (no access to my server from here): does it support font-face settings in the CSS? They have src: url() statements that point to the font files (.tff, .eot and such).
-
hi there
love your script!! veeery easy to implement and nice to see! good stuff!
question: how can i add a animated gif to your queryloader (i added a counter but i need to add also a «preloader-gif» …
thanks in advance!!!
-
Great script – solved my issues with Chrome and Safari stopping at around 90%. There was an image in my css which was not loading as it was named wrongly. Fixed this and works a treat.
-
Won’t work with jquery 1.6.1, ok with 1.5.2 :)
-
To be compatible with jQuery v1.6+ I applied this fix:
old (line 69):
} else if (typeof($(this).attr(“src”)) != “undefined” && $(this).attr(“tagName”).toLowerCase() == “img”) {new (line 69):
} else if (typeof($(this).attr(“src”)) != “undefined” && $(this).prop(“tagName”).toLowerCase() == “img”) {Note the change from $(this).atrr to $(this).prop
-
@Anima-t3d thnks for the fix actually does work.
-
Thanks for the great script, I had to tweak it a bit to work on Drupal 7 and I just want to share what I did for other user trying it on D7.
You will have to wrap the entire script in this to work.
(function ($) {
// Original JavaScript code.
})(jQuery);I also had to remove the var = right at the beginning of the script and added a ; to the last bracket at the end of the script. This worked for me and I hope it helps other D7 users.
-
I forgot to ask, is there a way I could brand the preloader with a logo or something for the user to see while they wait?
-
@hanzi, I think you can modify the js file, around line 114
QueryLoader.overlay = $(“”).appendTo($(QueryLoader.selectorPreload));
modify the div to include the logo, probably , then you can adjust the position using css
@Anima-t3d, thx for the solution. Will try it tmrw. There seems to be a problem with the function tolowercase in 1.6, I’m still new with jquery
@gaya, Thx for the great work
-
ups, the code is missing, my bad, didnt realise it.
should be: probably <div class=”logo”> </div> inside the div from the overlay
put a div to contain the logo, then should work
-
afterwards. It also tends to have fewer side effects than other methods.
-
Internet access than the United States and twice as many cell
-
Nice preloader!
Does anyone know how to make the transition diagonal instead of vertical and horizontal?
-
Anyone? Im not much of a scripter.
What I want to do is make it start from the bottom left corner, and end in the top right corner. :-)
-
it works fine instead greatttt
-
Gaya i found some errors for ie7.
-Loader took ages if images where already cache. Fixed.
-Sometime on load the page apeared before the overlay. Fixed.send me an email, i’ll pass you the code, and you can update the version.
-
I’m experiencing something strange, when I apply the script to my page it says, “ie is null” (line 46).
there isn’t error in localhost and there isn’t on Internet Explorer
-
I’m sorry but i have solved a problem to line 46. there was an broken image. Now i have another problem First to start queryloader seen for about one second the site, and only after everything is uploaded queryloader dark!! sorry for my english
-
Using your loader on my site. Had some issues with -webkit-gradient in js console. would hang up the page and you’d have to refresh a lot of the time. You might want to include a settimeout within the animateLoader function:
setTimeout(function () {QueryLoader.doneLoad();}, 1300);
awesome job on this and thanks much!!
-
Hello everybody. I have a problem with the script using Chrome, Safari and IE. There is a little delay before starting the preload, I see the entire page, and then after a second starts the preload. With firefox is all ok, any suggestion?
-
how to use preloaded for pop up using JQUERY thickbox
-
Hi,
There is a conflict with the newer version of JQuery. I am using JQuery 1.6, and if I add Jquery 1.3, some of my functionality aren’t working, and your script isnt working with JQuery 1.6
Do you think you could update it? (I would do it myself but Im no javascript developer…)
-
Ok I commented this part of line 64 in queryLoader.js
&& $(this).attr(“tagName”).toLowerCase() == “img”
And now it seems to be working fine.
$(this).attr(“tagName”) wasnt defined…
-
Great Script !!! Works properly!!!
[[[ Only ISSUE is ]]]
when images are not loaded by any chance… It will stuck and keep the area black… and if the entire page is preloaded and images doesnt load full page will be black with out any content display…
[[[ Another ISSUE is ]]]
If you dont have images in your page the script won’t work ;)
Use at your own risk!!!
-
@Gaya, related with Andrew’s message (#135) about the “background-image” css property and the use of background: url() repeat pos; did you come up with a solution?
-
This plugin is working fantastically well for me, but I was wondering if anyone had figured out how to change the color of the fade at the very end? I altered the color of the line to be a greenish hue, but now the entire site flashes to green before fading to my page. If possible Id love to have a green line and grey fade. Has anyone figured this out?
Thanks!
-
How can resolve a problem of Alebaio #426 ??
-
Hi, is it possible to use it in a page containing random backgrounds? I’m trying since yesterday but still doesn’t work :(
The loading process stops and the pages don’t open!
-
@Alebaio & Andrew, check my comment on #313: http://www.gayadesign.com/diy/queryloader-preload-your-website-in-style/#comment-14454
-
I love this loader but is there any way to have it adapt on page resize…it looks really bad when you resize the page and then you can see all the content underneath!
-
I really love this I’ve used it on a couple of projects for clients but just realised it does not work in ie9 ? it just plays the loading bar but when it opens up the content is still loading in and you see the images loading down etc?? anybody know of a fix for ie9
-
sorry to say.
For me its now working. showing only loading. not opening original page.
-
stopping at 93%. Please any help required.
-
@aiwazz – Would you mind sharing your timeout parameter? I am having a similar problem with FireFox. However, when I disable my PHP script it works perfectly. However, I want the PHP in there.
Thanks
-
@kevin
Can you upload an example modification file ?
-
someone recommended this tome and it works great, and i am not even using the color options. I would like only the image to fade in while the top menu bar stays, but for some reason when I add that id# the preloader starts about an inch below the actual images and leaves the top of them showing. Any advice?
With thanks, ute
-
There’s an error in percentage version link.
-
hey, great job! looks great in your demo but unfortunately it won’t work for me. i’ve put everything in the right place, i guess but maybe someone could have a look!?
liebezumdetail.com/yyy
cheers, J
-
Works like a charm!! Thanks for sharing!!!
-
Solution for problem stop in 93% 90% ETC….. !
animateLoader: function() {
var perc = (QueryLoader.doneStatus * QueryLoader.doneNow) / 100;
if (perc >= 99) {
$(QueryLoader.loadAmt).html(“100%”);
$(QueryLoader.loadBar).stop().animate({
width: perc + “%”
}, 500, “linear”, function() {
QueryLoader.doneLoad();
});
} else {
$(QueryLoader.loadBar).stop().animate({
width: perc + “%”
}, 500, “linear”, function() { });
$(QueryLoader.loadAmt).html(Math.floor(perc)+”%”);
}
},Best Regards
-
I have detected an error in routes, I see that in my Web it is registered an error 404 /initial in some route, somebody has the solution?
Thanks
-
Solved my all problem !
Thanks
-
Hi there,
Is there any chance you will be revisiting this preloader? Ideally to update it so it resizes when the browser resizes perhaps?
Great script btw.
Thanks,
Mark
-
Hi!
Love the loader. Im a darn noob at javascripts and such. But, is there anyway to exclude for e.g. images from loading in the preloader?
-
that thing is great! but my friendly advice:
in line where
if (url.length > 0)
its best to put
if (url.length > 0 && QueryLoader.items.indexOf(url) == -1)
for me it sloved huge problems :)
anyways great job ^^ saved me from making my own preloader
-
I try to using Jquery 1.6.2 and QueryLoader but it not working.
It just show black background.
Any idear to make it work on latest Jquery?
-
Very Good Work…
Its Cool……………….:)
Thanks
-
Nice Extension…
-
hi
nice extension. working perfectly with my cakephp as well.
but why does some part of my website shows up first before the preloader comes to picture.else everything is ok
-
seems like its only working with google chrome for me.
rest for opera and mozilla, some part of the website is loaded first before the preloader. then the preloader loads after which everything is ok
-
great plugin guys.. however I have added this plugin in my website but I am getting this error..
Error: o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function
Source File: http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js
Line: 19Can someone help please?
-
Hey, This seems like an awesome plugin. However I am having trouble getting it to work 100%. It only loads about 75-80% and I get this error through the google chrome console:
Uncaught TypeError: Cannot read property ’0′ of null queryLoader.js:48.Any ideas?
Thanks.
-
Also to note it seems to only be working for me in internet explorer 9….
-
Sweet I followed Kevins tips and it works now. Just for some reason the preloader is done loading before my background image is done , I assume because its being loaded through CSS?
-
Sorry for the multiple reply really need to get this working, the code is clearly set up to work with CSS background-images but for some reason my preloader finishes way before my background image is even close to being loaded, any ideas?
-
Hey there, awesome plugin!
Just one thing: It does not seem to work with the latest jQuery version (1.6+), is there any way you could fix this? I’d really love to use your plugin, but right now it just works with v1.4.
-
Anyone have this working in IE9? ooooh microsoft..
-
the “attr(‘tagName’)” has been dropped in jQuery 1.6 > http://bugs.jquery.com/ticket/9228
fix:
1. open the queryloader.js in your text editor
2. go to getImages: function
3. go to the else if part
else if (typeof($(this).attr(“src”)) != “undefined” && $(this).attr(“tagName”).toLowerCase() == “img”) {
var url = $(this).attr(“src”);
4. change attr to prop
else if (typeof($(this).attr(“src”)) != “undefined” && $(this).prop(“tagName”).toLowerCase() == “img”) {
var url = $(this).attr(“src”);:)
-
work in FF but IE dont work, i hate IE!!!!!!!
-
Thanks! Simply amazing :)
I’m using it in a few websites, now I´m just trying to get it working on my wordpress site… but no way :(
Does anyone know how to make it work in WP?Any help will be appreciated.
-
Auto-reply: Finally I got it working in my WordPress site:
1) Disable WP-Super Cache and Minify plugins if they´re running.
2) Upload the files needed to your webserver.
3) Place point 3 code in header.php
4) Place point 4 code at the bottom of footer.phpThe only issue found is that preload animation sometimes appear like 1 second late so you can see the content loading for a sec and then it disappear to show the loading animation and so on…
Any idea to resolve that issue?
Thanks!
-
Hi Gaya, great work! The preloader on my website stops at 92-93% and it gives me this error:
ie is null
[Break On This Error] if (ie[0].match(“MSIE”)) {Could you help me fixing this problem please?? Much appreciated,
Jeff
-
Hello,
I can get the preloader to work fine when I test it on my computer, but when I upload it to a server, it goes haywire. Here is a link to show you what happens:
http://www.turophiles.net/photos/baltic.russia.scandinavia/iceland/iceland.puffins.html
Any ideas on what is going wrong? This is the exact solution I have been looking for, so hopefully someone can help.
Thanks.
DJ
-
Hello there,
I plugged this in and it works great, however on any elements with multiple background images, it breaks. I’m working on a project that relies on that and I would love to use your plugin. It there any fix or can you point me in the direction to fix this? If not I’ll dig in myself :)
Thanks!
-Zach
-
hi, thanks for the script.
BUT IM FACING PROBLEM.
Its just showing BLACK screen, http://www.rediffusionyr.com/_demo/brahma/
Please HELP.
-
THANK @Marc.
Your comment No. 462 Solved my problem.
-
Thanks your post very useful :)
-
Does not work with jquery 1.6,
i had 1.6 on my website but i was forced to go back to 1.3 in order to get this preloader work correctly.
-
Hello
I fixed the problem of the broken images adding
$(imgLoad).bind(“error”, function() {
QueryLoader.imgCallback();
});
at line 96, just after
$(imgLoad).bind(“load”, function() {
QueryLoader.imgCallback();
});
This makes the script consider a broken image like a loaded image.
@RedRooster : If this is for the whole page you can fix this setting the loader’s height to 100% at about line 120.
-
Thanks a lot
-
Great Job!
It´s working almost perfect for me.
But there is one problem: The Preloaderpage is moved exactly 8px from the top and the left side, so you can see the background of the page in the top and the left hand area while it´s loading the page.
Can anybody help?
-
Uh, am i the only one that doesn’t like the idea of a preloader. A preloader slow down the view to its user. It’s better to show something and indicate that the page is loading. A peloader indicates that the site is slow. Display content as fast you can. Other technique is to use a div with a background instead of using the image tag to display images. You also get rid of the broken image image when the image cannot be loaded.
Preloaders are bad to your visitors! Especially when it takes a few seconds to load!
-
Also about your site name: gayadesign can be read as: gay-a-design, in other words: Fag a design, make a design bad. Have you ever think about that?
-
hieee
-
it’s not working for websites with frames! it works fine if i dont use frames, but how do i get it to work with websites that have frames on them?
<html>
GOATSY | http://www.elissaelizondo.com
QueryLoader.init();
>
why is your commenting system screwed up?
-
whoops…. sorry can u just look at the site and check my code for index.html i would much appreciate it mad props. ;) this site is freakin sick btw
-
Hi there,
I was wanting to be able to easily call a function after the animation is done, so I added that functionality here: gist.github.com/1196439I added an if statement at the end of QueryLoader.doneLoad() that will check if you have set QueryLoader.endCall to some function name. If you have specified a function name in QueryLoader.endCall, it will run that function after the animation is done.
Thanks for this great code… really like working with it! Let me know if there are some more enhancements to what I added that you can think of… feel free to use my gist.
~ Isaac
-
Recent comments