QueryLoader2 – Preload your images with ease

138

Oct

Posted on: October 26, 2011 in: DIY by Gaya

Gaya Design is back in business and hitting hard with a redo of the 2009 script QueryLoader. I kept getting e-mails and comments about it and thought I had left it just hanging there for way too long. It had become very outdated. So here it is: version 2 of QueryLoader!

Download
Download on Github Example
See it in action!

A direct link to the zipfile:
https://github.com/Gaya/QueryLoader2/zipball/master

View the example here:
http://www.gayadesign.com/scripts/queryLoader2/

What QueryLoader2 does is simply scanning the given elements for images (and background images) and preloading them before the website is visible.
This version has been modified to make it easier for users to implement (especially those who are already into jQuery.)

QueryLoader currently works with jQuery v1.7.1 and in IE version > 7, Chrome, Safari and Firefox.

How to use:

Include the script in the head section of your webpage.

<script src="path/to/file/jquery.queryloader2.js"
type="text/javascript"></script>

Be sure to add it after you include jQuery.

Now call QueryLoader in a $(document).ready() like this:

$(document).ready(function () {
    $("body").queryLoader2();
});

To make it work for iOS devices, use this code:

window.addEventListener('DOMContentLoaded', function() {
    $("body").queryLoader2();
});

That’s it! You’re done.

Options

You can add options to loader.

backgroundColor
(string) background color of the loader (in hex).

barColor
(string) background color of the bar (in hex).

barHeight
(int) Height of the bar in pixels. Default: 1

deepSearch
(boolean) set to true to find ALL images with the selected elements. If you don’t want queryLoader to look in the children, set to false. Default: true.

percentage
(boolean) Set to true to enable percentage visualising. Default is false.

completeAnimation
(string) set the animation type at the end. Options: “grow” or “fade”. Default is fade.

onLoadComplete
(function) this function is called once the loading is complete. This is handy when changing the animation at the end.

onComplete
(function) this function is called once the loading and animation are completed.

GitHub

As you might have noticed I put my code on GitHub. This makes it easier for me to manage my code and give you updates if you or me find any bugs.
You can also file issues with the script here and fork it to make changes / fix bugs. If you send me pull requests I will take a look as to what you have changed and commit it if it is an addition.

Articles like this one

If you liked this article you can add this post to:

This entry was written by Gaya, posted on October 26, 2011 at 9:10 pm, filed under DIY and tagged css, Javascript, jQuery, load images, preload, preloader, queryLoader, queryLoader2. Bookmark the permalink. Follow any comments here with the RSS feed for this post. Post a comment or leave a trackback: Trackback URL.

136 Comments

Andy Feliciotti said: October 26, 2011 at 9:15 pm | Permalink

Looks like Gaya needs a CDN ;), also nice to see you posting again!
Gaya said: October 27, 2011 at 8:13 am | Permalink

Thanks Andy :). I saw that I put on quite large images in the example. Not everyone in the world has super fast internet connections like us in the Netherlands. Fixed that.
Daniel said: October 27, 2011 at 11:06 am | Permalink

Looks great! Thnaks a lot for the effort.
Is there a way to have it “open up” when finished like the previous version did? Means not to fade out, but to have the halfs of the screen slide up // down…
Gaya said: October 27, 2011 at 11:14 am | Permalink

I was thinking about extending the script so you can put in your own effect at the end.
Will look into it and see if I can do that.
sharpK said: October 27, 2011 at 11:16 am | Permalink

Very useful, thanks.

But what happened to the percentage text?
I tried fiddling around but my jQuery-fu isn’t powerful enough.

Thanks for the plugin, though :)
Gaya said: October 27, 2011 at 1:15 pm | Permalink

Updated the script to enable percentage viewing and choosing the end animation. It can be either “fade” or “grow”. Also a minor bugfix. New version is on GitHub
Damon said: October 27, 2011 at 6:43 pm | Permalink

Hi, this looks pretty cool, im wondering though, is it possible to select what gets preloaded?

for instance, on my website i will have my portfolio page, id like al the button images in my website aswell as the thumbnails for the lightbox, but i dont want the full sized images to be preloaded or itll just take too long.

Is that at all possible?
Daniel said: October 27, 2011 at 7:07 pm | Permalink

Thanks a lot! Now thats fast working! Thanks for adding the “End” option! Big Up from Frankfurt! Cheers
Joe said: October 27, 2011 at 10:05 pm | Permalink

Thanks for this – another great preloader!
I had the last version on my site and it worked ok. I am struggling to get this one to work however… was wondering if I could be cheeky and get you to have a quick look!? jrharris.co.uk

thanks again!
Gaya said: October 28, 2011 at 7:59 am | Permalink

@Damon: yes, you can preload what you want to using a selector. For example, if you want to preload only the images in your #portfolio container which have the class .thumb you can do this: $(“#portfolio .thumb”).queryLoader2();
Good luck!

@Daniel: great addition to the script indeed :) try to get involved through Github if you have other issues or additions you’d like to see.

@Joe: Try to clean up the part of your html page. You need to include jQuery just once. And try to include and call QueryLoader at the bottom of the . I also tested QueryLoader for the latest version of jQuery and am not sure if it works with version 1.4.3
Joe said: October 28, 2011 at 8:28 pm | Permalink

@Gaya: Thanks for the brutal reply! Taken on board and now its working great! – what do you think?

Really appreciate you getting back so quick…
Joe said: October 28, 2011 at 8:45 pm | Permalink

One other thing – is there a way to change the font of the percentage numbers?
Vic said: October 29, 2011 at 3:21 pm | Permalink

@Gaya: Thanks for new loader.

I added the following to my stylesheet to make the loader work with my site:

#qLoverlay {
z-index: 50;
}

@Joe: I think you could change the font by adding a selector to your stylesheet, like:

#qLpercentage {
font-style: (desired font)
}
anonymous said: October 30, 2011 at 4:43 am | Permalink

Seems to load the entire page in Safari rather then just a portion from a selector.
Roberto.c said: October 30, 2011 at 3:41 pm | Permalink

A little bit addition:
barHeight -> define the height of the loading bar

HOW:
add default value in qLoptions var:

var qLoptions = {
…
barHeight: “1px”,
…

edit qLbar var (around line 102)

change
height: “1px”,
with
height: qLoptions.barHeight,

That’s all :)

Very good preloader!!!!!!!!!!!
Roberto.c said: October 30, 2011 at 3:50 pm | Permalink

I have found a lack around line 32, in onLoadComplete function definition:

onLoadComplete: function () {
if (qLoptions.completeAnimation == “grow”) {
$(qLbar).stop().css(“width”, “100%”).animate({
top: “0%”,
height: “100%”
}, 500, function () {
$(qLoverlay).fadeOut(500, function () {
$(this).remove();
qLoptions.onComplete(); <— YOU HAVE TO INSERT THIS LINE, SO THE ONCOMPLETE CALLBACK WILL WORKS
})
});
Gaya said: October 31, 2011 at 12:16 pm | Permalink

@Roberto.c Great additions. Will update the script to include those. Remember you can also get involved with the code through Github: https://github.com/Gaya/QueryLoader2

@Joe, Vic gave the right answer :)

@Vic: Will change the script so it has a huge z-index by default. Great notice!
Gaya said: October 31, 2011 at 12:41 pm | Permalink

New version on GitHub. Now contains options to set height of the bar and enabling/disabling deepsearch.
Emily said: October 31, 2011 at 2:12 pm | Permalink

i cant use it with blogger :(
Dan said: October 31, 2011 at 5:36 pm | Permalink

@Gaya awesome script, definitely what I needed and easy to plugin. I got it to work on my end, but since I’m experimenting with my site, I’m also running to a specific problem. It seems like the script isn’t supporting multiple css backgrounds in CSS3 (http://www.w3schools.com/css3/css3_backgrounds.asp). I’m sure it has to do with the function that finds the url string of images.

I’ve found ways to go around it by using extra divs/z-index to apply different backgrounds, but would like CSS3 multiple backgrounds to work. Any insight on changing the script to support it?

Thanks for your contribution and time.
-Dan
Gaya said: October 31, 2011 at 5:44 pm | Permalink

@Dan great question! Never thought of that. You can file an issue on GitHub so I wont forget.
Great to see that it worked for you.
Fxck said: November 2, 2011 at 5:30 pm | Permalink

More of that CSS3 stuff. It tries to load css gradients and obviously fails..

“NetworkError: 400 Bad Request – http://recyplast.cms.local/-moz-linear-gradient(50%%200%”
http:/…0%%200%
“NetworkError: 404 Not Found – http://recyplast.cms.local/191”
191
“NetworkError: 404 Not Found – http://recyplast.cms.local/77”
77
“NetworkError: 404 Not Found – http://recyplast.cms.local/47”
47
“NetworkError: 404 Not Found – http://recyplast.cms.local/166“
Fxck said: November 2, 2011 at 5:49 pm | Permalink

Also it doesn’t work along with Moderniz for some reason..
Fxck said: November 2, 2011 at 6:15 pm | Permalink

..and sometimes it just stays on 0%, with no error.
Gaya said: November 3, 2011 at 9:04 am | Permalink

@Fxck: will look into the CSS3 stuff and Modernizr. Never occured to me that those might be used.
Can you give a more detailed description on the 0%? Which browser are you using and which page does it stay at 0%? Maybe I can dig up some reasons there.
You can also file these issues on GitHub, it will be easier for me to manage it there.
Thanks for the feedback
Fxck said: November 3, 2011 at 11:47 am | Permalink

On this page http://recyplast.f13.cz/ (you have to refresh a couple of times, sometimes it works, sometimes it doesn’t) and in chrome 15.0.874.106, on the other hand, it happens only on my site, not in your demo, so it’s most likely colliding with the other plugins, or my rather messy code itself.
Fxck said: November 3, 2011 at 12:46 pm | Permalink

Ok, stuck on 0% in Opera 11.51 as well.
dani said: November 3, 2011 at 7:34 pm | Permalink

Hi,

Thank you so much for this fantastic/fantastic looking preloader.

The loader keeps getting stuck at 71%…not sure why.

I’m using it on a site that has animations that are triggered by the document ready function.

Any help would be greatly appreciated
dani said: November 3, 2011 at 8:19 pm | Permalink

Just wanted to update and say it’s only a problem in firefox. It is working in safari, but stalls on 71% in firefox.
dani said: November 3, 2011 at 8:36 pm | Permalink

Ok…last message.

In safari, the preloader works correctly after the first load and animations are displayed accurately.

However, if I press shift+refresh and empty the cache the preloader works, but upon opening the animations have already happened

Still no luck with firefox.
Kaumac said: November 3, 2011 at 10:06 pm | Permalink

same here, the loader gets stuck on pages with more content, and only when theres already some cache, opens fine on first time. It does get stuck on Chrome and Firefox, works in IE, haven´t tested it on other browsers yet. I´ve posted to GitHub also.
Les said: November 4, 2011 at 1:09 am | Permalink

I just can’t seem to get this (or the old version) to work. I follow your instructions correctly… use the same version jquery as you. Is it possible that it’s a server thing? I’m using wordpress too jsut FYI…. could tat be a problem? I’m pretty noobish when it comes to most things so if you could have a peek that would be great.

http://www.thiscoldblack.tk/

It just doesn’t work for me and loads the page normally.
The9fan said: November 4, 2011 at 5:28 am | Permalink

Code seems to work fine in FF, but with IE7&8, swf mediaplayer starts up before percentage starts loading. Would think if its an order issue, I’d see it with both. Any help appreciated. Thx.
Gaya said: November 4, 2011 at 9:05 am | Permalink

Thanks for the feedback all.

@dani: you can try to put the animation stuff in the onComplete event of queryLoader so it fires once QL is done.

@Kaumac: Thanks for posting on GitHub. I will look into it and respond there.

@Les: Try to call the script at the bottom of the it might be interferring with other scripts.

@The9fan: Can you give me an example of your page? I haven’t test it with swf mediaplayers
Pablo Fernández said: November 4, 2011 at 10:45 am | Permalink

Thanks Gaya for you preloader.

I have a one question.
Is possible put a gif in the place of the percentage?
how?

Thanks
Fxck said: November 4, 2011 at 11:54 am | Permalink

So, the problem in my case is this line

if ($(element).css(“background-image”) != “none”) {

from time to time ‘$(element).css(“background-image”)’ always returns ‘none’, so the problem is most likely not with my code. Could be because there’s too many nodes or something.
Fxck said: November 4, 2011 at 12:01 pm | Permalink

..and what seems to have fixed it is that I’ve included the file before the end of body tag, not in the head as you suggest..
piero said: November 4, 2011 at 2:07 pm | Permalink

Hey, great plugin, fairplay.

One thing, percentage doesnt work for me…!

$(“body”).queryLoader2({backgroundColor:’#ffffff’,barColor:’#4D6D24′, percentage: true,barHeight:’30′});

placed just before the …
piero said: November 4, 2011 at 2:08 pm | Permalink

placed just before the body end tag (my previous comment was truncated…)
The9fan said: November 4, 2011 at 4:55 pm | Permalink

Sure, try this in both browsers. Again, seems to work flawlessly in FF, has issues with IE7,8.

http://www.mybarefoothorse.com/test/
The9fan said: November 4, 2011 at 4:59 pm | Permalink

Sure…. http://www.mybarefoothorse.com/test/

Again, everything seems perfect in FF, but IE 7,8 both start the player, then start the wait screen. Progress bar starts at ~50%.
dani said: November 4, 2011 at 9:07 pm | Permalink

Gaya,

Thank you so so much. It is now working perfectly in Safari.

Still no luck with firefox. It still stalls at 71%. Not sure why since the animations are now linked to the onComplete of queryLoader.
Matthew said: November 7, 2011 at 5:32 am | Permalink

Nice to see v. 2! I’m experiencing the loader getting stuck at around 70% as well in Safari and Chrome as well. I’ve run the script in the head and footer but neither helps. In v1 there was a problem with CSS3 background gradients… perhaps this is still a problem with this version?
Will said: November 7, 2011 at 3:51 pm | Permalink

First, great job. Can’t wait to utilize this (currently updating my site with this). Also, I’ve discovered an issue with the qLbar in the loader. I hooked up jquery 1.7, you know, trying to keep up and all. But my loading bar was acting jumpy, kept resetting, wouldn’t expand across the page. I found that somehow, it was rendering the width in px instead of percentage, which is what was causing that. Switched back to jquery 1.6 and it works fine. Just a bug I came across, FYI.
Renaud said: November 8, 2011 at 1:06 pm | Permalink

Hi gaya : )

I use you’re pretty loader for my website and it help me to wait until my full page load. I use to read a xml with ajax and put my html code using cdata, images and video as well. But theses one sadly do not been include in the loader. I mean it’s work fine but not for this xml content I append in the page.

My problem is that i’m using a javascript floating menu but this one do not work until the whole page is loaded.. And i’m unfortunately a beginner with jquery !

I will appreciate if you have a idea to include it ! I think this will finalise my website if you find a solution ^^

Here is the beginning of the code I use :
$.ajax( {
type: “GET”,
url: “lib/data.xml”,
dataType: “xml”,
success: function(xml)
{
$(xml).find(‘item’).each(
function()
{

Big thanks,
R
Sam said: November 8, 2011 at 2:18 pm | Permalink

Looks awesome Gaya, however like many others here I’m having an issue with the preloader being stuck at a certain percentage ( depending on the browser ).

For example, on Chrome,Firefox and Safari it gets stuck at 71%
in IE at 99%

Any help would be greatly appreciated as I really love this pre-loader :)
Jeff said: November 8, 2011 at 4:43 pm | Permalink

Hi,
I’m new to jquery and web development in general. I’ve loaded the plugin and there are couple of things I’m not getting right.

1) the overlay only fills the top portion of the screen instead of filling the whole screen.

2) I’m not sure how to get the options to work. When I use this code for example: window.addEventListener(‘DOMContentLoaded’, function() {
$(“body”).queryLoader2(“#E20D0D”);
});

I would expect to get a red overlay. But is stays the default black. Am I inputting this incorrectly?

3) is there any way to use a div for the overlyay? I’d like to have the overlay contain a logo and some text.

thanks,
Jeff
Renaud said: November 8, 2011 at 7:19 pm | Permalink

Hey Jeff, you should use it that way for example :

$(document).ready(function () {
$(“body”).queryLoader2({
backgroundColor : ‘#262626′,
barHeight : 10,
percentage : true,
deepSearch : true,
onComplete: function() {
$(bghide).fadeOut(“slow”); // your stuff

}
});
});

And you can customise it by changing the code inside the .js here : line 95

var createOverlayLoader = function () {
qLoverlay = $(“<your html stuff

and the css is bellow in the code

Cheers,
R
Jeff said: November 8, 2011 at 7:39 pm | Permalink

Thanks for the info! I really appreciate it.
Jeff
Jeff said: November 8, 2011 at 8:52 pm | Permalink

First part works great, Now I’m trying to get fancy by putting a splash image in the middle of the whole thing. I can’t seem to insert an image in the .js. Text and tags seem to work fine but when I insert this:

<qLoverlay = $("

I get errors. Any idea how to insert an image over the overlay color?
thanks again,
Jeff
Jeff said: November 8, 2011 at 8:54 pm | Permalink

should be this…

<qLoverlay = $("
Jeff said: November 8, 2011 at 8:56 pm | Permalink

hmmm. my code is getting cut off so I’ll describe what I did.
I put a path to an image file in the qLoverlay div.

I get errors when I do this.
Joe said: November 8, 2011 at 10:42 pm | Permalink

This is a very slick loader. Thanks so much for this.
Pablo Fernández said: November 9, 2011 at 10:10 am | Permalink

Hi to everyone,

I find the solution to put a image in the preload instead percentage:
qLpercentage = $(“”).prepend(”)

Bye
Simone said: November 10, 2011 at 3:29 pm | Permalink

Hi,
is there a way to put a minimum time before leaving the preload page?
If I don’t have too much image to load it takes a very short time.
Thanks
Kaue said: November 11, 2011 at 2:11 am | Permalink

Hey, any progress on the loader stucking issue?
Alex said: November 11, 2011 at 6:24 pm | Permalink

Hello,

thats an wonderful script. It works fine. Is it possible to stop any other scripts until the loader is ready? I use easySlider with jquery but when the QueryLoader is loading, the slider works at same time.

Thanks
Alex
Larry said: November 12, 2011 at 3:11 am | Permalink

Hi,

I have the same issue with IE as Alex. Script for media player ( and music) starts before the queryloader. Issue doesn’t exist for Firefox. Any help appreciated.
dan said: November 12, 2011 at 5:33 pm | Permalink

I tried to use but remains locked in http://www.locdejoaca.com to 100%;
Sam said: November 13, 2011 at 7:29 pm | Permalink

Just trying my luck in case you skipped my message;

Having an issue with almost all browsers on my website ( http://www.samzamor.com ), the loader gets stuck at 71%, any chance of letting me know why this is occurring would but much, much appreciated :)

Thanks
Sam said: November 13, 2011 at 7:32 pm | Permalink

p.s. – I removed the script until I figure out the fix, because I can’t have visitors stuck at 71% :P
Gaya said: November 14, 2011 at 9:42 am | Permalink

Commited a new version that fixes the CSS grandient problem and preloader getting stuck at percentages. Seems that people were trying to preload images that didn’t exist (404). Please check GitHub for the latest version.
Sam said: November 14, 2011 at 1:18 pm | Permalink

Thank you so much Gaya, much appreciated !
Kaue Machado said: November 14, 2011 at 1:55 pm | Permalink

Thanks for your efforts! Really!
Btw, does it work with 1.4.2? Personally I prefer working with lower versions of jQ. Thanks again!
Éderson Ribeiro said: November 17, 2011 at 6:08 pm | Permalink

There’s a way to change color of porcentage? Btw… very nice script… ! Thanks for share!
kmajna said: November 19, 2011 at 3:44 pm | Permalink

..hi guys..im new in web design and jquery etc and i wloud like to have this great plugin on my page but it doesnt work and i dont know why..check here:

http://test.djkmin.cz/foto2.html
Abner said: November 21, 2011 at 1:58 am | Permalink

@kmajna Your script.js has weird characters…

Error: illegal character
Source File: http://test.djkmin.cz/js/script.js
Line: 1, Column: 1
Source Code:
{\rtf1\ansi\ansicpg1250\deff0\deflang1029{\fonttbl{\f0\fnil\fcharset238{\*\fname Courier New;}Courier New CE;}{\f1\fnil\fcharset0 ;}}
Gaya said: November 21, 2011 at 9:25 am | Permalink

Thanks for the reply @Abner

@Ederson: try to style: #qLpercentage
Sari said: November 21, 2011 at 5:27 pm | Permalink

This plugin is fantastic! But i do have a question: does anyone else have the issue where the site flashes for a second, and then the preloading screen covers it?
Website laten maken said: November 22, 2011 at 10:40 am | Permalink

Yes! This is where i searching for. I have use it on one of my websites. Thanks! Only is it possible to place the load tag above in the code? My website is showing for a very short thime, then you see a fast refresh with the queryloader.
Website laten maken said: November 22, 2011 at 10:41 am | Permalink

@Said, yes i have that problem to. Do you have already have the solution?
kmajna said: November 22, 2011 at 6:32 pm | Permalink

@Abner

..ou THX man.. :) ..btw it doesnt work anyway..the page is visible but the photo is still loading.. :(
Gaya said: November 23, 2011 at 11:40 am | Permalink

@Website laten maken: Sorry, your comments were marked as spam. Maybe because of your username since it’s quite spammish ;)

So this might fix @Sari’s and your issue:

The problem might be that the actual creation of the overlay is too late. Try moving the call of .queryLoader2() higher up the page. Making sure it’s the first thing done at $(document).ready()
Mark said: November 24, 2011 at 8:13 pm | Permalink

Thanks for an awesome script! Love your site.

One question though, is it possible to replace the loading bar with a .gif picture instead?
matthew said: November 25, 2011 at 10:42 pm | Permalink

@Sari Yeah, I had the same problem. Even when queryloader was the first execution, it would flash my header’s background color, and the background color of the body before kicking in the preloader div. What i ended up doing was wrapping the whole content area, and using display:none on that div. Then i used this to force the div wait a second and then display block:

$(‘#wrapper’).delay(1000).css(‘display’,'block’);

It’s a little messy, but it’s the only way I’ve found to ensure that the query loader has time to kick in before anything else.
ttthx said: November 27, 2011 at 3:17 am | Permalink

that’s what i really need
love you thanks

btw i find your scripts from BLACK★ROCKSHOOTER officialsite
http://www.noitamina-brs.jp/
Dan said: November 27, 2011 at 4:07 pm | Permalink

Hi i am trying to use this preloader in my website. It works fine apart from one problem. Every time i click a link on my website it executes the preloader again. Is there any way to make it so that it only preloads once?

Thanks.
bang jasmin said: November 28, 2011 at 8:35 am | Permalink

hi gaya,…… thanks for sharing
simple questin…
a specifically….. what the difference with the first?
Rafael Gomes said: November 29, 2011 at 11:55 am | Permalink

Nossa muito louco, estava a procura de um plugin desses
oldguy said: November 29, 2011 at 11:29 pm | Permalink

Hi, I’m having a weird problem… It seems that it is having size issues :) the progress base is unable to grow bigger than 90PX …. I don’t understand the issue… but the way it is working is that the % is shown correctly but the bar keeps on resetting itself .. it goes back to width:0px to 20px ; 0px- 60px ; 0px – 90px and so on… on each time the %age is changed… can anyone help?
Ariel said: November 30, 2011 at 12:09 am | Permalink

Hi Gaya!
Very nice and useful code! I’m experiencing some problems when I try to add images inside the loader, this images are being preloaded. Check out here: http://gamesandweb.quen.co.

Thank you so much!
bang jasmin said: November 30, 2011 at 10:20 am | Permalink

not support with ……..jquery/1.7.1/jquery.min.js
Gaya said: November 30, 2011 at 10:28 am | Permalink

@Ariel: You can exclude the images in the query selector.
@bang jasmin: will look into it.
Gaya said: November 30, 2011 at 10:37 am | Permalink

Not having any problems in jQ 1.7.1.

Works as expected.
bang jasmin said: November 30, 2011 at 1:13 pm | Permalink

sorry boss, i mean old preloader….
i try jQ-1.6 or jQ 1.7.1, and priview……. stag at 0% no-display
arthur said: November 30, 2011 at 3:36 pm | Permalink

sorry for the question, i’m a newbie. where i should put this code:

$(document).ready(function () {
$(“body”).queryLoader2();
});

? : (
Will said: November 30, 2011 at 11:19 pm | Permalink

Thought I would contribute another working example. My portfolio page has close to 70 images (all nested throughout some cool little sliders). Used this to preload everything and works awesome! Great job @gaya!

http://sleekdesignstudio.com/work.php
gwozdziu said: December 6, 2011 at 12:38 pm | Permalink

Hi,

I used Your script in my website, it works amazing, but i have got one pretty serious problem. Every time i click on any category the script load the whole page again – i think it should load only the missing elements. What is more when i click on same category i am already in, the page is loading one more – it should be save in cache i hope ?

http://www.nowosielscy.eu

regards,
kinetic said: December 11, 2011 at 7:23 pm | Permalink

Just want to say big THANKS…
Rod said: December 12, 2011 at 10:33 pm | Permalink

Hey Gaya…
Great Preloader … thanks
I have a problem though with the v2.1
the thing is that my website loads then the preloader appears… any idea why?
i added jquery 1.7.1 then ur script in my home page then in the body i added this:

$(document).ready(function () {
$(“body”).queryLoader2();
});

any help would be great
thanks…
Rob Mientjes said: December 13, 2011 at 12:37 pm | Permalink

Hey Gaya,

Great plug-in, it works like a charm. One thing I find a bit tricky to use, however, is onComplete. I’d like to have that as a function on its own, so I can start a bunch of animations at different places in my (rather complex) document, all starting at onComplete, not $(document).ready(); Is there a way to do this?

Thanks!
Rod said: December 13, 2011 at 11:34 pm | Permalink

hey
ok so i was trying another way so i created a script.js file where i called QueryLoader in a $(document).ready() as u said… the plug in still works but it also loads after my website opens normaly….

anyone has an idea about how to fix that??
thanks anw guys!
Rod said: December 14, 2011 at 11:18 pm | Permalink

ok i don’t see where the problem could come from everything seems gd to me!
load jquery
load queryLoader
call for queryloader in body (i’ve tried in the head also or in between)

and still the script appears after all my site loads!!!
Any suggestion would be great thanks!
Prashant said: December 16, 2011 at 9:24 am | Permalink

Great Script!
However, i m facing 2 issues.
In Opera the site does not load and gets struck at 0%.
Also my website loads for a second(or 2) and then preloader comes.
Here is a demo.
http://www.prashantsani.com/demos/SUF1/index2.html
I welcome any help/suggestion from your end :)
Steppo said: December 16, 2011 at 3:11 pm | Permalink

Found a solution:

To all people with stopping loading bars. Check for dead image links within your source code and css files.

Fixed the stopping loading bar in Chrome and Safari that way.
Sari said: December 16, 2011 at 10:16 pm | Permalink

@Gaya and @Matthew

Thank you both for your help! It turns out the wrapper with ‘display:none’ did the trick.
Rad said: December 18, 2011 at 12:06 am | Permalink

If you have a stylesheet with url(”) for whatever reason, it stops the progress bar indefinitely. Although I should have used “none” instead of the above code, I still think stopping forever is pretty bad.
sandeep said: December 18, 2011 at 9:03 am | Permalink

@Gaya
Hi…i dn’t hav any good knowledge of jquery but…as u told in ur tute above i tried but i an just getting effects of jquery…and one thing i put this code: $(document).ready(function () {
$(“body”).queryLoader2();
});

it stops and show screen with 0% loading…if u can tell where am missing would be great help.
thnx
Prashant said: December 19, 2011 at 9:30 pm | Permalink

Dont know why my page is not loading in any version of Opera.
As previously mentioned i have cleared all the image 404s and all…
but still it fails to work in Opera.
DId some research opening the same in Dragonfly(opera).i get a error “Uncaught exception: TypeError: Cannot convert ‘a.runtimeStyle’ to object”.(now what exactly is that?also this error is in my jquery file)
I didn’t get any 404 errors(mostly the above errors and -webkit- and -moz specific styles errors ).
May be the script is conflicting with other jquery plugins like accordion and slideshow……
I tried even to replacing the jQuery to different versions but that didn’t solve the problem either.
Zihou said: December 20, 2011 at 4:02 am | Permalink

Does not scan body bg-img for me in FF8. Any ideas what might be the reason?

background-attachment: fixed;
background-clip: border-box;
background-image: url(“../img/bg.jpg”);
background-origin: padding-box;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
Shevaa said: December 22, 2011 at 7:51 am | Permalink

Thanks Gaya Nice and Useful loader. It working fine
Seraph said: December 23, 2011 at 8:20 pm | Permalink

Hi, this is a very cool script, but… I have little problems , first… y use Firefox for testing and seems like the preloader works , but after complete , my webpage continue loading the images, i’ve tested in IE9 and works fine, in CHROME works too, even in Safari works, I Dont know why doesn’t work on FF, Opera is not a big problem, but firefox is one of the most used explorers in my country… any ideas, if somebody want to see it go to:

http://oliverochoa.com
buffy said: December 24, 2011 at 2:10 am | Permalink

nice work! but it doesn’t work with FF9, sorry
dc said: January 2, 2012 at 12:13 am | Permalink

yes it does. Just tested it on FF9. works fine.
Saulo said: January 3, 2012 at 3:01 am | Permalink

Hello! Thanks for the awesome plugin. I created a google code project to host your plugin to use in my site.

The link to the project homepage is: http://code.google.com/p/queryloader/

The link to the direct minified javascript version (Google Compiler) implementation from the google servers is: http://queryloader.googlecode.com/svn/trunk/queryloader-latest.js

Hope you don’t mind because like this I save bandwidth and resource. Also google servers are awesome and 100% uptime. I give you fully credit and the zip file is exactly as I downloaded from your Github account…

Thanks again!
Saulo
Levi Szekeres said: January 6, 2012 at 10:53 pm | Permalink

Hi!
I think this version is so much better than the first one!
I love it and I’d like to make a small change, but it’s over my head.
As strange as it may sound, but I’d like to show the percentage run slower =) I tried even heavy content, fresh pages, online, offline, virtual server and nothing. It runs way too fast. I should be happy by web standards, but I’m not really. You know, sensitive, design stuff.

Thank you for the loader, online is the older one.
Levi
Dary said: January 12, 2012 at 7:40 pm | Permalink

Im noob guys and no idea where to call QueryLoader in a $(document).ready()… any help please? Appreciate!
Nick said: January 13, 2012 at 11:46 pm | Permalink

Is there a way to set the speed of the loader please?
Drew said: January 15, 2012 at 2:10 pm | Permalink

Levi:

You might try the following code modification, it worked for me:
(Lines 36-44):

setTimeout(function() { $(qLbar).stop().css(“width”, “100%”).animate({
top: “0%”,
height: “100%”
}, 500, function () {
$(qLoverlay).fadeOut(500, function () {
setTimeout(function() {$(this).remove()},5000);
qLoptions.onComplete();
})
}); },5000);
Drew said: January 15, 2012 at 3:06 pm | Permalink

Pardon me, change the following instead:

Approx line 93:

if (qLoptions.percentage == true) {
setTimeout(function() { $(qLpercentage).text(Math.ceil(percentage) + “%”);},1000);
}

Increase the 1000 at the end for a longer wait (milliseconds)
jason said: January 17, 2012 at 8:29 am | Permalink

i cant get the loader working on my site can someone help me out please
jason said: January 17, 2012 at 8:29 am | Permalink

http://dom-kennedy.tumblr.com/

i cant get the loader working on my site can someone help me out please.
Manny said: January 17, 2012 at 2:44 pm | Permalink

Awesome script I have used it in this site http://mfbf.co.za/2011/
now I am not sure why this happens but the HTML content flashes just before the loader shows up.

when I hit F5 then it works great on second load.

is there anything I do to stop this?
Peter William Gottlieb said: January 18, 2012 at 1:07 am | Permalink

Great stuff, guys! Looks realy good. I just have one question:

Say I want a piece of image graphic in the queryloader bar itself. A piece of graphic to be shown while the rest of the graphic is loaded.

How would this be done? I’vve tried reverse engineering the script all night long, and just can’t get it done.

Any pointers?
Eric Davis said: January 19, 2012 at 10:56 pm | Permalink

First off I’ve used this on several sites and love it! So you’d think I would have worked out the kinks but I’ve run into one I can’t quite fix. For some reason when I run a function after onComplete, it is running the function twice. I tested it using an alert function to confirm. Here’s what I have…

$(“body”).queryLoader2({
percentage: true,
onComplete: function(){
alert(“loaded”);
}
});

I have some code for buttons, etc. running after that but I wouldn’t think it would effect the preloader code.

Any advice?
Lars said: January 20, 2012 at 2:06 am | Permalink

Hi!

Thanks fpr this cool script. I had to google while until i found it, but it is exactly what I was looking for.
But I am getting perfekt results only in IE. Maybe you can check this link and tell me, if there are any things, I can improve to make it loading directly at the beginning. http://www.platin-artwork.de/
I have these problems especially in IE and Safari. Both are latest versions. The loader shows first up, after some content form the page appeared.

Mayn Thanks!
Lars
Sydney Web Designer said: January 22, 2012 at 2:40 am | Permalink

So i want to have this progress bar to load all the images THEN exceute the animation after the progress bar disappears on my homepage.

How can this be done?
Patrick H. said: January 24, 2012 at 10:05 am | Permalink

My progress bar is stuck at 0% and nothing happens.

Do I have to do anything to my file structure, or alter the code to get it to work? I have many other scripts running as well (easing, fancybox), so I think you should address that and provide some workarounds if possible.
Patrick H. said: January 24, 2012 at 10:13 am | Permalink

So I’m thinking this doesn’t work in Chrome… is that right?
Patrick H. said: January 25, 2012 at 1:09 am | Permalink

Your code does not work with the latest version of jQuery. Please update!
Alfonso Martin said: January 27, 2012 at 2:26 pm | Permalink

Hello! Thanks for the awesome plugin. I think you could add a new option in qLoptions:

var qLoptions = {
…
qLoptions.appendLayer = “body”,
….
}

I would like to append the preloader to a small region, instead of all the body page.
flashysite said: February 5, 2012 at 6:10 am | Permalink

Thanks for this brilliant preload with loading bar plugin. Easy to use and tweak.
MM said: February 7, 2012 at 1:55 pm | Permalink

Could you add a cookie so it only appears once per session? Also, add the iOS function as an if statement so it covers both?
vonBendix said: February 8, 2012 at 3:53 pm | Permalink

hey, nice preloader – but i have a problem with Mozilla Firefox 10.0 – preloader stop at 80% … in MSIE it works

can u help me, please?

best regards from germany
Pablo said: February 9, 2012 at 8:42 pm | Permalink

hi! awesome plugin!

im having issues on IE 8, the loader never ends. Can anyone help me? The site is at http://dev.pablini.com.ar/hachiko
Joey said: February 10, 2012 at 8:48 am | Permalink

Hello, your plugin is awesome, I tried integrating it on a wordpress template and it works fine but it doesn’t load at all on IE 7, any idea what could be the issue?
Isaac said: February 11, 2012 at 5:48 pm | Permalink

Thks for the tut it’s really helpful :) btw lets say I want
to make a preloader with my own graphics how will it be done?
Joey said: February 12, 2012 at 10:15 am | Permalink

Hello, I tried the plugin again in it’s original state (after testing the demo on IE7 itself), so it works now, but I have an issue to modify the JS so that it makes two more element appear. I tried to add a custom element via a variable qcustomEl within the createOverlay object. It works fine on IE9, and the image.gif appears, but not on IE 7 and 8. Any clue why?

qcustomEl2 = $(qcustomEl).append(“”).css({
height: “400px”,
width: “281px”,
position: “absolute”,
top: “60%”,
left: “40%”,
marginTop: “-” + (59 + qLoptions.barHeight) + “px”,
textAlign: “center”,
marginLeft: “-50px”,
color: qLoptions.barColor
}).appendTo(qLoverlay);
Joey said: February 13, 2012 at 7:50 am | Permalink

the solution was to declare qcustomEl2 with var. Now it works on both IE 7 and 8.

Cheers!
Lord_Mord said: February 13, 2012 at 9:13 pm | Permalink

Hey,

This is a very great plugin, but sadly it wont work for my site. The loader appears for a very short time, than dissappears and the site is loading as usual. It seems, that the problem has nothing to do with my JS, because it even appears, when all other scripts are removed. Is it possible, that the script ignores article and section tags?

It would be great, if you can help me,
Sebastian
Lord_Mord said: February 13, 2012 at 9:14 pm | Permalink

Oh, my website is: http://www.von-ammenberg.de/
Leonhard said: February 15, 2012 at 7:49 pm | Permalink

Hi,
can someone tell me if it just preloads images or also swf files, embedded with swfobject?
unfortuneately my internet is that fast that I can’t recognise any difference…

Leonhard
Lord_Mord said: February 18, 2012 at 12:01 pm | Permalink

I made it work (The reason was the noscript-query. I erased it). But now the load progress isnt shown. It stays at 0% for a while, than suddenly jumps to 100. Is that a known behaviour?
HIko said: February 19, 2012 at 2:10 pm | Permalink

Hey !

Great plugin, thx for your hard work !
I’ve been able to make it work seamlessly everywhere but i just can’t figure out how to add an image during the loading animation.

To be more precise, i added the image but it is hidden until the loading is down, with is …. not what i need :)

I’ve looked in the comment, and you said to exclude it with the query selector but i’ve not found it in the JS file :’(

Could some one point me how to exclude a single image ( maybe selected by it’s class or id) from being hiding during the loading process.
Henry Cullen said: February 21, 2012 at 1:23 pm | Permalink

Great Plug in thanks so much for the work !
Cédric said: February 22, 2012 at 4:45 pm | Permalink

Hi !

Thank you very much for this plugin !

I have a suggestion for the plugin, and of course it’s something I need ;) !

Your plugin is a very beautiful way to keep the visitors when the content is loading. Sometimes, the page loads to fast and the visitor has not enough time to see the animation. Is there a way to set a minimum animation time ? I mean create a new option :

- By default, no minimum time.
- If the user specify a minimum time :
– if the page loads slowly, no problem.
– if the loads faster, the animation will be displayed during this minimum time.

Thanks a lot ;) !

Ced