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/queryLoader2/ 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
185 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!
Recent comments