Problem with the Circular Preloader Animation

[niklasinla]

Hi there!
I'm trying to use the code for the Circular Preloader...

But it seems like I can't make it work.

I'm not entirely shure where to actually use the code in my setup.

What I'm doing with my js-files are to combine them into one file using gulp.

The way I have set it up means that the code for TweenMax is in the one js-file before config-code & preloader class/function.

I'm using the code for the preloader in one file that I call preloder.js.
In this file I setup the config:

var preloader = new GSPreloader({
radius:42,
dotSize:15,
dotCount:10,
colors:["#61AC27","#555","purple","#FF6600"], //have as many or as few colors as you want.
boxOpacity:0.2,
boxBorder:"1px solid #AAA",
animationOffset: 1.8, //jump 1.8 seconds into the animation for a more active part of the spinning initially (just looks a bit better in my opinion)
});

After this I have the whole preloader class/function code.

 

Then I have a custom.js file where I in the 

$(document).ready(function()

call preloader.active(true);

I keep getting an error in my js-console...
"Uncaught TypeError: Cannot read property 'appendChild' of null
GSPreloader
(anonymous function)"

var preloader = new GSPreloader({

The error is regarding this code in the preloader class/function:

parent.appendChild(element);

I've also tried to in my head paste ALL js-code for the preloader with script tags but keep getting the same error/problem...
ALL code means including config-code & preloader.active(true);

Does anyone have an idea as to why this is happening?

Best, Niklas

[Carl]

Its very difficult to troubleshoot something like this totally blind.

It would be great if you posted a demo that either loaded your gulp file (without the minification) or loaded the files separately in the same order as gulp would place them.

It is very important here to know the order in which scripts are loading and when they are being executed.

 

It sounds to me like you are trying to create a new preloader animation BEFORE the DOM is loaded / accessible.

 

The only thing I can suggest without seeing what is happening is to make sure that the code below does not run until you are sure the DOM (especially the body) is rendered and accessible

var preloader = new GSPreloader({
radius:42,
dotSize:15,
dotCount:10,
colors:["#61AC27","#555","purple","#FF6600"], //have as many or as few colors as you want.
boxOpacity:0.2,
boxBorder:"1px solid #AAA",
animationOffset: 1.8, //jump 1.8 seconds into the animation for a more active part of the spinning initially (just looks a bit better in my opinion)
});

From what I gather, your error is basically saying: "I don't know what the parent is, so I don't know what to append the preloader DOM elements to"

If you do not specify a parent, the PreLoader uses body:

var parent = options.parent || document.body,

[niklasinla]

Wow!

Thanks Carl.
Fast answer & it was spot on!

That was my problem indeed.

Now I'm having a problem to turn the preloader off after calling it on in
 

$(document).ready(function()

If I turn the preloder off in 

$(window).load(function()

the preloder remains undefined.

So I moved $(window).load(function() method inside $(document).ready(function() method & it works - but is that really a good way to do this?

 

Thanks, Niklas

[Carl]

yeah anything you define in .ready() is going to be in the scope of that function, and not accessible outside of it.

 

I suggest you DEFINE the preloader var OUTSIDE of any ready or load functions like

var preloader; //just create the variable don't assign it any value

//inside of ready() CREATE the preloader instance (no use of var here)
$(document).ready(function(){
  preloader = new GSPreloader({ .. })
})

then inside of your load() you should be able to access preloader as well.