QueryLoader2 – Preload your images with ease
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
Articles like this one
265 Comments
-
Looks like Gaya needs a CDN ;), also nice to see you posting again!
-
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.
-
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…
-
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.
-
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 🙂
-
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
-
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?
-
Thanks a lot! Now thats fast working! Thanks for adding the “End” option! Big Up from Frankfurt! Cheers
-
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.ukthanks again!
-
@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
-
@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…
-
One other thing – is there a way to change the font of the percentage numbers?
-
@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)
}
-
Seems to load the entire page in Safari rather then just a portion from a selector.
-
A little bit addition:
barHeight -> define the height of the loading barHOW:
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!!!!!!!!!!!
-
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
})
});
-
@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!
-
New version on GitHub. Now contains options to set height of the bar and enabling/disabling deepsearch.
-
i cant use it with blogger 🙁
-
@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
-
@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.
-
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“
-
Also it doesn’t work along with Moderniz for some reason..
-
..and sometimes it just stays on 0%, with no error.
-
@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
-
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.
-
Ok, stuck on 0% in Opera 11.51 as well.
-
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
-
Just wanted to update and say it’s only a problem in firefox. It is working in safari, but stalls on 71% in firefox.
-
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.
-
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.
-
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.
-
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.
-
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
-
Thanks Gaya for you preloader.
I have a one question.
Is possible put a gif in the place of the percentage?
how?Thanks
-
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.
-
..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..
-
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 …
-
placed just before the body end tag (my previous comment was truncated…)
-
Sure, try this in both browsers. Again, seems to work flawlessly in FF, has issues with IE7,8.
http://www.mybarefoothorse.com/test/
-
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%.
-
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.
-
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?
-
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.
-
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
-
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 🙂
-
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
-
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 stuffand the css is bellow in the code
Cheers,
R
-
Thanks for the info! I really appreciate it.
Jeff
-
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
-
should be this…
<qLoverlay = $("
-
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.
-
This is a very slick loader. Thanks so much for this.
-
Hi to everyone,
I find the solution to put a image in the preload instead percentage:
qLpercentage = $(“”).prepend(”)Bye
-
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
-
Hey, any progress on the loader stucking issue?
-
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
-
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.
-
I tried to use but remains locked in http://www.locdejoaca.com to 100%;
-
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
-
p.s. – I removed the script until I figure out the fix, because I can’t have visitors stuck at 71% 😛
-
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.
-
Thank you so much Gaya, much appreciated !
-
Thanks for your efforts! Really!
Btw, does it work with 1.4.2? Personally I prefer working with lower versions of jQ. Thanks again!
-
There’s a way to change color of porcentage? Btw… very nice script… ! Thanks for share!
-
..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
-
@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 ;}}
-
Thanks for the reply @Abner
@Ederson: try to style: #qLpercentage
-
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?
-
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.
-
@Said, yes i have that problem to. Do you have already have the solution?
-
@Abner
..ou THX man.. 🙂 ..btw it doesnt work anyway..the page is visible but the photo is still loading.. 🙁
-
@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()
-
Thanks for an awesome script! Love your site.
One question though, is it possible to replace the loading bar with a .gif picture instead?
-
@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.
-
that’s what i really need
love you thanksbtw i find your scripts from BLACK★ROCKSHOOTER officialsite
http://www.noitamina-brs.jp/
-
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.
-
hi gaya,…… thanks for sharing
simple questin…
a specifically….. what the difference with the first?
-
Nossa muito louco, estava a procura de um plugin desses
-
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?
-
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!
-
not support with ……..jquery/1.7.1/jquery.min.js
-
@Ariel: You can exclude the images in the query selector.
@bang jasmin: will look into it.
-
Not having any problems in jQ 1.7.1.
Works as expected.
-
sorry boss, i mean old preloader….
i try jQ-1.6 or jQ 1.7.1, and priview……. stag at 0% no-display
-
sorry for the question, i’m a newbie. where i should put this code:
$(document).ready(function () {
$(“body”).queryLoader2();
});? : (
-
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
-
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,
-
Just want to say big THANKS…
-
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…
-
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!
-
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!
-
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!
-
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 🙂
-
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.
-
@Gaya and @Matthew
Thank you both for your help! It turns out the wrapper with ‘display:none’ did the trick.
-
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.
-
@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
-
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.
-
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;
-
Thanks Gaya Nice and Useful loader. It working fine
-
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
-
nice work! but it doesn’t work with FF9, sorry
-
yes it does. Just tested it on FF9. works fine.
-
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
-
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
-
Im noob guys and no idea where to call QueryLoader in a $(document).ready()… any help please? Appreciate!
-
Is there a way to set the speed of the loader please?
-
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);
-
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)
-
i cant get the loader working on my site can someone help me out please
-
http://dom-kennedy.tumblr.com/
i cant get the loader working on my site can someone help me out please.
-
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?
-
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?
-
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?
-
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
-
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?
-
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.
-
So I’m thinking this doesn’t work in Chrome… is that right?
-
Your code does not work with the latest version of jQuery. Please update!
-
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.
-
Thanks for this brilliant preload with loading bar plugin. Easy to use and tweak.
-
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?
-
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
-
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
-
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?
-
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?
-
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);
-
the solution was to declare qcustomEl2 with var. Now it works on both IE 7 and 8.
Cheers!
-
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
-
Oh, my website is: http://www.von-ammenberg.de/
-
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
-
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?
-
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.
-
Great Plug in thanks so much for the work !
-
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
-
to gaya design…
how to upload images if the change ?
-
Thanks for the plugin!
I little upgrade it:
– If the line 113 to change – position: “absolute” – it works in ie 6!;
– If you add the after line 102 – $ (qLimageContainer). Remove ();
if (document.getElementById (“qLoverlay”)) {$ (“# qLoverlay”). hide ()}; – it solved the problem in ie 8.
Test: FF 10, Chrome 17, ie 6-8, Opera 11.
Gaya, something like this need to add to plugin
-
I didn’t see: “#qLoverlay” without space!
-
It looks like it doesn’t work offline (file:///) with Chrome mac…
-
I confirm: browsing your example offline on a Mac with Chrome the progress bar gets stuck at 0%.
No problem with Safari and Firefox though.
-
I have a problem. An iFrame for a youtube video is still visible in IE and chrome when the loader is working. Any ideas on how to fix this problem? And firefox does’t even work for me!?
-
Looks like its working now the only problem i noticed is on firefox it preloads too early when using GD Library in php to create thumbnails. Works perfect in chrome though…
-
Gaya, just what i’m looking for! works great!
As mentioned by somebody else, its not preloading an image directly placed into the body for a full background jQuery script that runs behind all content and scripts.Eg:
I have to use jQuery noConflict for old and new scripts to run, I even tried putting this script as the first .js called for after my oldest version of .js and the problem is the Body img loads first before the scripts whether just after old or latest jquery 1.7.1.min.js
Please advise.
Everything else works 100%
-
Hi there,
I’ve got a problem with images loading twice,
I think it could have something to do with gzip compression, do you know if theres any conflict there? or any conflict with the image resize script timthumb?
-
I am having a slight issue in IE and occasionally in FF where prior to loading, the page will flicker displaying some content on my page before the loading bar kicks in. Any suggestions?
-
Is it possible to localize the loading progress animation and style to the vicinity of the selector on which it has been applied so that it does not show progress on a “body” scale.
-
I figured it out.
-
Can’t get this to work on my WordPress site…can someone help please? A VERY detailed step by step would be appreciated.
Thx!
-
hi! great code!
but man i have the same problem of Eric:“I am having a slight issue in IE and occasionally in FF where prior to loading, the page will flicker displaying some content on my page before the loading bar kicks in”
i use:
jquery-1.7.1.min.js
and call QueryLoader before
-
…before close body tag
-
Qryloader2
This is great and it works perfectly well in asp.net.The bar: is it possible to show a picture instead of a bar?
Thanks
-
Thanks for this … took me a bit to figure how to stop the flashing of pages before the preloader shows. I tried calling the blacked out screen from code and it just never seemed to be consistent so instead I used css which never seems to misfire.
The trick is to create a div that blacks out the whole page, however, in your css, be sure to know if the visitor has javascript enabled or not; so they dont have a blacked out site! Drupal offers a nice helper class that adds .js class to the html element, but this can be done manually in other systems of course, google it.
html.js #bg-maincover{
background-color:#000;
position:fixed;
right:0;
left:0;
top:0;
bottom:0;
height:100%;
width:100%;
z-index:200;
}Then add this to your onComplete in the queryloader2 javascript… the added bonus of the timer gives us a little bit more blackness after the preloader fades out, otherwise it goes so fast the lettering and bar are still visible/ghosting over the content when page reveals.
$("#bg-maincover").fadeOut(1000);
-
I’m rather new to all this and seem to be having a difficult time getting this pre-loader to run. The webpage is
http://www.hightechsign.com/delete . Does anyone have any suggestions about what I may have done worng in the code?Thank you!!!!!!!
-
@Lori Nelson
Put jquery in your above queryLoader2 script
-
put jquery in your head tag above the queryloader2 script… comment formatted removed it in last post.
-
@ Josh
Are you referring to this line?
REALLY appreciate your help! Thank you so much!
-
@ Josh
Are you referring to this line?
script src=”jquery-1.7.1.js” type=”text/javascript”
REALLY appreciate your help! Thank you so much!
-
oh nevermind Lori it is there, but its in there again near the bottom of your body tag
-
I must say you had my hopes up! Lol… Thanks anyways!
-
I just figured out why it was not preloading DIV backgrounds in CSS. When parsing the url, it was returning the full URL with all the “http://domain.com”, I just made a workaround in the script removing it. Hope it helps fixing the code.
-
Hello, thanks for this plugin,
how it is possible to change the time of wait plz ? Because it is to fast for my website, i want to take the wait time less fast,
Thanks !
-
Nice code, but could you someone help me to make it work for just a part of my website ty in advance.
-
I am having a problem with this loader,
Instead of loading, the screen just turns black ( no percentages show up, below is the head, and last part of the code (which I think are the only places I should be altering))EL SUPER MUSIC COLLECTIVE
<!-
->
PAGE BODY
$(document).ready(function () {
$(“body”).queryLoader2();
});var TabbedPanels1 = new Spry.Widget.TabbedPanels(“TabbedPanels1″);
-
Hi! I’m using the plugin and it works perfectly on Chrome, Firefox and Safari but for some reason, it won’t load in IE 8. Can anyone help me out?
-
Hi Gaya,
I ve implemented your code, exactly like what you posted here.
however, sometimes it worked fine, sometimes not … could you please check it out ? http://www.navahproduction.com
try to go “home”, “about”, and “our works” , repeat it few timesThank’s Gaya
-
@Shedo: the indexOf for array types is not implemented in IE7/8,
just add the following on line 27 (just after var declarations):if (!Array.prototype.indexOf)
{
Array.prototype.indexOf = function(elt /*, from*/)
{
var len = this.length;var from = Number(arguments[1]) || 0;
from = (from < 0)
? Math.ceil(from)
: Math.floor(from);
if (from < 0)
from += len;for (; from < len; from++)
{
if (from in this &&
this[from] === elt)
return from;
}
return -1;
};
}
-
Gaya, et al,
Installed the latest version. It works fine in FF but just stays stuck on “0%” in IE9. I tried it with the demo also with the same results ?? Ideas ??
Also
A couple of issues (request ?)
1. what happens if java is disabled on the users browser?2. The biggest issue I have is that it runs every time a user returns to the home page. I only need it to run when a user first comes to the site. Once they are in everything is already in the cache and it doesn’t need to run again. I tried setting the “min time” to 1 and to 0 but still got a flash of the “loading screen” . To have it only runs once would i need to place a cookie or poll the cache to see if the page has been cached ?
3. The main reason i need this is because of some background images that are being used load last and it looks really bad, could I place those in a hidden and have the loader just preload them ?
Thanks
Joel
-
Some of my post got edited. it doesn’t like html tags…
#3 should read:
3. The main reason i need this is because of some background images that are being used load last and it looks really bad, could I place those in a hidden (div tag or class) and have the loader just preload them ?Thanks
-
I could find a small problem with the plugin, for very large images checking for “qLdestroyed” in success of ajax request for images misbehaves, means this comes true before all images are loaded. So queryloader gets removed before all images are loaded. Please make below changes in queryloader script.
////createPreloadContainer method
for (var i = 0; qLimages.length > i; i++) {
qLimageCounter++;
$.ajax({
url: qLimages[i],
type: ‘HEAD’,
error: function (request, error) {
qLimageCounter-;
},
success: function (data) {
if (!qLdestroyed) {
addImageForPreload(this[‘url’]);
}
}
});
}
-
Hello, I am having some issues getting my content to load properly after the pre-loader has finished. i just get a blank screen. Hoping to get some input from somebody out there. Would appreciate any help.
http://www.idgstage.com/360-test/receiver/compact_example.html
That is where I am having my problems.
Thanks in advance!
-
Hi,
Great job, without modifications works fine, but I’ve tried to combine loader with theme stylesheet-switcher, based on script from this site http://www.cssnewbie.com/simple-jquery-stylesheet-switcher/ After clicking the button I replace stylesheet, but it works without reloading the page. How to add preloader before replacing css? I’ve tried with the code below but it works only once, after second replace I’ve got page with 0%if($.cookie(“css”)) {
$(‘link[href ^= “_css/style”]‘).attr(“href”,$.cookie(“css”));
}
$(document).ready(function() {$(“#colors”).children(“div”).click(function() {
$(‘link[href ^= “_css/style”]‘).attr(“href”,$(this).children(“a”).attr(‘rel’));
$.cookie(“css”,$(this).children(“a”).attr(‘rel’), {expires: 365, path: ‘/’});$(“#wrapper”).queryLoader2({
barColor: “#FFF”,
backgroundColor: “#101010″,
percentage: true,
barHeight: 1,
completeAnimation: “fade”,
minimumTime: 100});});
});
Thanks in advance,
Best regards
nimda
-
First of all, thanks for this wonderful script of yours 🙂
I´m using the backstretch plugin for a background slideshow, which images arent preloaded by the queryloader, because they never appear in the markup.
Is it possible to enhance the code and manually add a folder with images, that should also be preloaded?
-
great script, exactly what i was looking for! but the latest version doestn’t work in ie8 and ie7. version 2.1 works fine.
-
Just a heads up on what Dileep Paul commented, because of the comment thing in here it broke his code. I put on pastebin so everyone can enjoy it (because it fixed my problem)
Here is the link: http://pastebin.com/EuQDZBx2
-
Hello Mauricio Vargas, please make one more small change. Because it helps to keep loader error free in the case of missing or external images(from other domain).
error: function (request, error) {
qLimageCounter-;
if (qLdone == qLimageCounter) {
destroyQueryLoader();
}
}
-
Paste below code in very top of jquery.queryloader2.js, so it will work in IE 7 also.
if(!Array.indexOf){
Array.prototype.indexOf = function(obj){
for(var i=0; i<this.length; i++){
if(this[i]==obj){
return i;
}
}
return -1;
}
}
-
Well … I really wanted to use this script but the “flash contents” before the preloader kicks in drove me away 🙁
Would have been nice!
-
Works fine in ie9 for me but the loading page disappears right away when I test it in Firefox 12.
-
On ie8 I get:
Webpage error details
User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.1; WOW64; Trident/4.0; SLCC2; .NET CLR 2.0.50727; .NET CLR 3.5.30729; .NET CLR 3.0.30729; Media Center PC 6.0; InfoPath.3; .NET4.0C; .NET4.0E)
Timestamp: Wed, 25 Apr 2025 17:42:55 UTCMessage: Object doesn’t support this property or method
Line: 181
Char: 17
Code: 0
URI: http://**********/test/scripts/queryloader2.js
-
I really like this pre loader, but it just works on safari & not @ firefox v12.0 – The percent-bar stops @ 0% and the screen doesn’t switch to the main-content after preloading… does anybody have a solution to fix this issue?
Greetz
-
gr8 script it works good but sometimes stops at 90% & stop the site from loading…
Is there any solution to force the site content load if its not supported in browser or stop in middle of loading… reply pls
-
Man this is wicked! Appreciate you sharing your knowledge gaya! I have a question… script works sweet as on my site, although when the page begins to load it shows it loading normaly (with no preloader) then after a few seconds the preloader kicks in… i know its just a few seconds but it would be rad if it could start loading with the preloader first. is this possible? thanks heaps!
-
So I saw another comment above, that said to add $(‘#wrapper’).delay(1000).css(‘display’,’block’); to my code… I have done this and nothing has changed. My site still starts to load normaly, then the preloader begins. I have made sure this code is the first thing I execute, then the jquery.1.7.1.min, and vise versa but nothing. sigh. Maybe its my code??
$(document).ready(function () {
$(“body”).queryLoader2();
(function(){$(‘#wrapper’).delay(1000).css(‘display’,’block’);});
});
-
It stop at 0% in Chrome. Don’t know how to solve this problem. Please help me.
-
it has problem on chrome and safari, the content not loaded properly….
-
Hi,
First of all nice script! I didn’t had the time to go trough all your code and fix my current issue. minimumTime is not working when set. Tested in FF, CHROME!
Thanks!
-
Thats a nice one, But is there anyway to customize the width of the progress bar.
-
Great effect. Question: how can I prevent the few seconds of the non-styled page appearing before the preloaded starts?
-
Great effect. Question: how can I prevent the few seconds of the non-styled page appearing before the preloaded starts?
isnt that the point of the preloader, not to show your unstyled page before it finishes loading? From the comments im reading on here it looks like this version is broken.
-
Great script. Thanks!
Btw, is it possible to switch to a vertical bar? An for this would be awesome. Perhaps in a future update. x)
Cheers!
-
To all who have the annoying site flash issue, and since Gaya seems to have stopped responding to any requests or questions, here’s a fix.
http://pastebin.com/fzTNGVgj
Hope this works for you.
Uemit Oezcan
-
I have to say that I think this is a great preloader. However, being new to jQuery and javascript I don’t know how to fix this issue on my own.
I downloaded and installed the loader tonight following the directions given and when I tested my site in Google Chrome, the loader never went away. It gets to 100% and stays there never showing my site. How does one fix such issue?
-
Hi,
I have installed the plugin in my web, but happens the same that without it, when i write http://www.pabloalcaraz.es works, but if i write pabloalcaraz.es doesn’t.
How can I solve this?
Thanks!
-
I think it would be best practice not to bother with even more flakey code and just have the most practical elements of your site load instantly. Do you really want the first thing your visitors see dependent on some unsupported feature?
-
I want to remove the backgound color that fills my screen before the images are loaded. Can I just hide everything – the activity going on and the loader – and only display teh page when it is ready to be displayed?
Thanks
-
As Warren said, the QueryLoader 2 does not work in Firefox 12. It goes to 100 % and then shows all the content before it has been loaded. However, the old QueryLoader 1 does work with Firefox 12 ;-). I would be glad if you combine the two in Queryloader 3.
-
i’ve got a real strange phenomen with the iphone and the telekom provider. the loader only works if i declare a background-image in the css. no idea why. and only with telekom, other provider that i test, works as expected.
maybe it points to a prob with the loader itself with background-images in css in general.
i hope this comment will save somebody else a lot of time.@gaya – thx for your great work.
-
I’ve got the same problem as Fredrick. And it’s the same for Firefox 13.0. Would be happy with a fix.
-
I think I found a solution but I’m yet to really test it on other browsers just on my Firefox 13.0. Its using a ‘window’ instead of a ‘document’ in the function declaration, so this is my new code:
$(window).ready(function() {
$(“#gallery”).queryLoader2({
barColor: “#6e6d73″,
backgroundColor: “#fff”,
percentage: true,
barHeight: 1,
completeAnimation: “grow”,
minimumTime: 100
});
});Works fine for now.
-
I have prepared a new web site using Adobe Edge. It generates 4 files for each page of the site. For instance, index.html, index_Edge.js, index_EdgeActions.js, and index_EdgePreload.js.
There is also a necissary directory called “edge includes”, that includes a number of .js files including one called json2_min.js and yepnope.js. the others are numbered names with .js.
I was hoping you might give me a little more direction to use your pre loader.
Thank you
-
Hey, im quite new to creating websites, but i do have to say your perloader looks awsome. I have sucesfully installed it on my site. But because im new to all this progress is step by step. Its an artist site, and therefore the gallery contains some large images. I would like these to be preloaded aswell. But for some reason it doesnt load chidren sites,l only my main (index) page.
I would also like to change the font of the percentage showing but i cant figure that out either.
Help would be greatly appreciated.
-
So ive worked out how to customize the layout and font, i even managed to spice it up a little, however im now running into a problem on the gallery page of my website. I just wont use the loader and the loader is mainly to use on exactly that part of the site. Could this be a conflict between different scripts of some sort?
I really hope someone could help me with this.
Thanks
-
Found out that it conflicts with mootols that im using for the gallery, as im new to all this i have no clue how to solve this, if there is even a solution to the problem.
Anyone any ideas?
-
Im in nirvana, i finally found the solution, did some digging on the net and found that if i add:
jQuery.noConflict();
to the top of every script calling the jQuery lib, and then replace every instance of $( in every script using jQuery (in this case the preloader) with jQuery( both libs now get called upon approriately. Hope this helps others that have had this problem. And again thanks for your awsome plugin.
-
Please explain: where should I call jQueryLoader (where should I past the second part of your code)?
-
Maestro: Paste the second part of the code in a new js file and link to that file in the same way as you’re linking to the first.
eg
alternatively, you could just put
$(document).ready(function () { $(“body”).queryLoader2();});
-
If you have some problem, check your address… it’s different http://www.yoursite.com and yoursite.com.
-
I’m currently building WordPress site with a large hover image swap at the bottom. I made the image in fireworks with slices and hotspots. Will this script load the all the hidden sliced images does anyone know or tried this?
Thanks!
-
Hi Gaya,
I’ve just discovered your script and it looks fantastic and I would really like to implement it on a lot of websites I create – However the above posts are correct, it does NOT work in the latest versions of Firefox.
It goes through the animation progress of 0%-100% very quickly then shows the page whilst all the images are still loading.
Works fine in latest version of IE, Chrome & Safari. However in IE it flashes the page before it shows the loader.
Does the same using your own demo.
-
Also, in Opera it shows a white screen while everything loads then once everything is loaded, plays the animation quickly then displays the site… defeating the purpose of the loading animation?
http://www.aimpublications.com.au/temp
if someone has any suggestions?
-
Hello,
I have One question ragarding this superb script:
is there any way to skip the animation when somebody is comming back from other subpage of the website?I mena sb goes to home page – sees the loading, then goes to contact, and than back to home and its obvios hi’s already loaded all pictures so no need for the loader here. ? some cind of refferal white list?
-
Hi, I find your loader really fantastic!
Just a question:
My site includes a 100 images jquerry gallery which in the index.html is called like this:How do I tell you loader to also load all the images of the gallery? Becuase right now is preloading only the BG images of the HTML file.
Thank you!
-
Sorry like this:
div class=”gallery-area”
ul class=”list”
li title=”inc/slide01.html”
div class=”holder”
img src=”images/img-01.jpg” alt=”image description”/
-
I have found a bug. When i open my website with a Nokia N8 Browser, the preloader will not fade out.
Is there any eventlistener for this Browsers?
PS. On ios devices it works fine with your presented event listener.
Thanks!
-
This plugin is fantastic!
But i do have a question: It works in IE, FF and Chrome but in Opera it gets struck on 87%. But when i turn on the turbo mode it works perfectly. With turbo mode off it don’t work and gets struck.Please reply soon!!
thanks anyway 🙂
-
Hi,
First I have to say this is a really nice plugin.
I only have one question is it possible to select a background image instead of a background color?cheers
-
A fix has been posted for the FF bug:
http://pastebin.com/EuQDZBx2
-
can i add “Loadin Page……” text with loading bar
-
Not working in IE9….any solution..?
-
Hi! i need a support, I have conflict in my website, the preloader works but not the other jquery functions.
what should I do?
-
Thanks, this script really rocks! looks really slick and does what it needs to do.
Someone above mentioned that minimumtime doesn’t work, i cant get that to work as well but i just set a delay before the fadeout effect in the script which did the trick for me.
-
Great plugin Gaya.
-
To get the preloader to work correctly in FireFox, update the code with the following. These functions are around the 87th line.
var createPreloadContainer = function() {
qLimageContainer = $(“”).appendTo(“body”).css({
display: “none”,
width: 0,
height: 0,
overflow: “hidden”
});
for (var i = 0; qLimages.length > i; i++) {
qLimageCounter++;
addImageForPreload(qLimages[i]);
}
};var addImageForPreload = function(url) {
var img = $(“”).load(function(e) {
qLimageContainer.append(e.target);
completeImageLoading();
}).attr(“src”,url);
};
-
hi iam from egypt so my english lang. is not very good
i want to ask : way this plug-in not working with internet explorer 7 or internet explorer 8
-
Hello, thanks for your aportation.
It´s a greats preloader for me. But i need to incorporate a photo on the preload. A logo from my company, how i can do it ?
-
I really wanted the load animation to just show the percentage and then fade away without the grow effect. Maybe this is a hack way of doing it, but if anyone else is stuck on this, just go to line 76 in the loader jquery and change the height to 0. Seems to work fine.
-
We are using J-query with images and a text box to lay over the image. We are trying to add variable text into the text box but it keeps locking up, any suggestions?
-
Hey,
I’m having trouble getting this to work on ipad, im not sure how to use
“window.addEventListener(‘DOMContentLoaded’, function() {
$(“body”).queryLoader2();
});”
aswell as the jquery ready function. how can I make it work on pc’s and if on mobile use the above code?thanks
-
Hi,
I want to use this loader but i can’t make ir work.
The demo download stops in 0% and dies there.Can anyone hel me?
I dont understand where to write this:$(document).ready(function () {
$(“body”).queryLoader2();
});Thanks
-
Hi.
I love the looks of this one 🙂 Thanks for the brilliant code. Just one thing.. For some reason the page shows for a very short time before the loading bar appears, and after 100% still there are pictures that are not fully uploaded. Do you have a solution for this? I did put the codes inside the head tags.
-
hi there, can i use it on wordpress?
did you have a wordpress plugin already created?
i need to do something like http://www.bbdo.com
help please!!!
thx
-
Hi Gaya 🙂
thank’s for the loader, it’s great!
one thing i was trying to do but couldn’t find how is to apply the function on a tag that is not “body” (like a div or id element) because i wanted to load only part of my page and not all of it, is there any way to do that?thanks a lot 🙂
Orit
-
Great plugin thank you, the only problem i’ve experienced is that in some cases (on site example no, but on my site yes) on IE 9 and 10 the percentage decrease also :\
Like percentage i.e.:
0,30,50,40,70,50,90,100Is this a know problem and does someone has a fix to it?
-
liked to use the company logo on preloader, however I am not able to “call” file is in the folder who queryLoader.css demo. I can only set the background color for the js?
Thank you.
-
Nine plugin, thanks
-
Hi. Plugin is great. But can you old TV-set effect. I mean when you turn on old TV it show white stripe that grows to big sircle and then shows image
-
Hey I hope this is useful to some of the commenters, If anyone is having problems with navigation on pages with anchor tags and this loader running every time clicking a home anchor, use below on the onComplete.
onComplete: $(“body”).queryLoader2 = null
-
Hello guys,
All of my elements with background images are inside a container div and there is a header on top which should be displayed all the time even when the preloader is loading the content.How do I do that?
Also,when the loading is happening,I need to display an image inside which the percentage thing is present.How do I achieve it?
Thanks,
Skyrbe
-
Fixed it!
-
Very Usefull
-
Hello. I found a bug.
In Chrome version 22.0.1229.94 m
Preloader does not run.
In the debugger observe the following error:
GET index.html: 44
XMLHttpRequest cannot load Origin null is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load Origin null is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load Origin null is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest cannot load Origin null is not allowed by Access-Control-Allow-Origin.
OPTIONS Resource failed to load jquery.min.js: 4
send jquery.min.js: 4
f.extend.ajax jquery.min.js: 4
createPreloadContainer jquery.queryloader2.js: 110
afterEach jquery.queryloader2.js: 98
$. fn.queryLoader2 jquery.queryloader2.js: 231
(anonymous function) script.js: 2
o jquery.min.js: 2
p.fireWith jquery.min.js: 2
e.extend.ready jquery.min.js: 2
c.addEventListener.B jquery.min.js: 2This error is in the DEMO.
Tell me how to fix it. Thank you.
-
Important!
Note that this will ONLY WORK if you view your page from server-side.Some people, like myself, try to code their websites off their hard-drive as much as possible! This drove me nuts until I realized I had to upload it to my server for the preloader to work!
But otherwise, AMAZING pre-loader! Thank you Gaya!!!
-
@Zane , Alex and all others having trouble with running the html page locally.You need to place the code in a server on your local machine and run the code using localhost . Otherwise, you’ll get a cross origin issue(which is basically an ajax call gone wrong).Install wamp or something similar and put in your code in there
-
Nice preloader but I have a problem. It seems that the background image (defined in Css) is not loaded before the page is shown. (http://test.tiira.net)
-
Sadly it is not working for me on a site i’m working on locally in wamp server, I have one of my images src as php file with contents
other image preloaders are detecting this correctly and loading the div after the 10~ seconds
-
the php file contents:
sleep(10);
readfile(‘image.png’);
-
Hi,
Really great script, works fine with a nice effect!
But I guess there’s a small issue, if the desired image has not been found on the server, loader hangs somewhere and won’t finishes, leaving percentage with black background on the page.Hope this helps for further development.
-
Hi,
Seems like a great plug-in, unfortunately, I can’t get it to work in my site…From what I understand you just need the js file:jquery.queryloader2.js and another line of code :
$(document).ready(function () {
$(“body”).queryLoader2({barColor: “#F5A492″,
backgroundColor: “#52A3B8″,
percentage: true,
barHeight: 30,
completeAnimation: “grow”,
onComplete: function()
{
alert(“loaded”);
}
});});
/*
window.addEventListener(‘DOMContentLoaded’,function() {
$(“body”).queryLoader2({
barColor: “#6e6d73″,
backgroundColor: “#fff1b0″,
percentage: true,
barHeight: 30,
completeAnimation: “grow”
});
});
*/and it should work-doesn’t work at all..My body tag is defined like this:—Could that be the problem? see http://www.kamiblue.com
Thanks,
Kami
-
I dont know what happened to that code for the body tag-so Im leaving off the , but it looks like this: body gradient onload=”init()”
Thanks
-
Hey Gaya, i need to preload some video tags. Can this preload do this?? I’m trying, but i can’t notice that is working…
-
Contratulations! fantástic work!
-
it looks cool! but I can not get it to load more in 80% ….. then it just stops.
-
some help!!!
-
Hi, I need some help with this. I have tables and pictures within the tables. When I call the preloader, I see the tables first, then the whole screen disappears (preloader gets active) and after that I see the complete page with all pictures. How can I get rid of the first step (tables only before the preloaders starts)? I tried the call on different positions (header, page, template, footer), always the same result.
Thank you!
-
We had a big problem in Joomla to implement the script. Joomla to version 2.5 was developed on Mootools, and if we add our own JQuery script we have some problems because both JQuery and Mootools use the $ sign.
To resolve this conflict, just add to our script the following line labeled “head”:
jQuery.noConflict ();
and replace
$ (document). ready (function () {
With This One
jQuery (document). ready (function ($) {
Thanks a lot!
-
I’m testing the preloader and ran into the same issue with the percentage hanging. I found it was due to some images not being found because I had changed their paths. I put the correct paths in and it took care of the problem. Just a tip in case others run into this issue. Good tool that I’m probably going to use! I’ll contribute toward a pizza if I do . . . thanks Gaya!
-
I ran into a situation with IE8 — I like using earlier versions of IE for testing because there are still some die-hards that don’t like to upgrade. I am using another jquery plug-in called “jarallax”. Since I started using your preloader (which I’d love to use, btw), I’m getting an error only in IE — it works fine in FF, Chrome, Safari, and Opera. In IE8 I’m getting “Object doesn’t support this property or method – jarallax-0.3d.min.js, line 12 character 779″. The portion of the code that is failing is “this.controllers[b].activate(this);”. So, I imagined that it was a conflict with JQuery and tried running it in no-conflict mode but am still having problems. I’ve asked the Jarallax developer to look at it, but am hoping that you might be able to check it out as well. The url is http://www.dynamicdzine.com. Any input you have on it is appreciated.
-
Looks great! Might use it in my site. Great job Gaya
-
Hi
I have tried in many ways to make it work on my blogger
but i am unable to install in correctly
please give me easy process to include queryLoader2 in my blogger
thanks in advance
-
I don’t know if it’s just me or if everyone
else experiencing issues with your blog. It looks like some of the
written text on your posts are running off the screen.Can somebody else please provide feedback and let me know if this is happening to them as well?
This may be a problem with my internet browser because I’ve had this happen before. Cheers
-
Hi, this preloader is great!
But I’ve a problem. The loader starts after to show a little bit of the content. How can I do to initialize the loader first of all?
This is the website where I include the loader:
http://www.vermellboats.comI’ll waiting for your answer. Thanks.
-
OLA, POR FAVOR NECESITO AYUDA, LA ANIACION SOLO LLEGA AL 80% Y SE QUEDA ALLI.. POR FA AYUDENME. GRACIAS DE ANTEMANO
-
Your demo only works the first time you run, to update or re-enter does not work and stays at 80%, this sucks. Do not fix the problem since 2011.
Su demo solo funciona la primera vez que se ejecuta, al actualizar o ingresar nuevamente no funciona y se queda en 80%, esto apesta. No arreglan el problema desde 2011.
-
cant able to preload background images…
please help…
Recent comments