Animate - HTML5 Canvas: problems with loaders

[tnbnicer]

Hi.

Preloaders or throbbers don't do anything in low bandwidth simulations.

Browers: IE, Edge, Firefox, Chrome wait until all script files are loaded before the page is displayed.

A live server might be different, but I'm not ready to go live yet.

My tests have been with PreloadJS's LoadQueue class using the "progress" property and an external throbber js which is supposed to show an animated spiral.

The bandwidth setting is super low, but still ...

Firefox stays on the link page and the other browsers display a white page.

Is it just me? Filesize: about 200kb.

[Colin Holgate]

Animate has a preloader option, and it uses the simper technique of showing an animated gif in a DIV while the main files are being downloaded. When they're ready the preloader DIV is hidden. That will work, you could replace the Animate graphic with your spiral.

[tnbnicer]

I think I understand. The spiral is not actually a gif but a second canvas script. That would not work, unless it's a gif. Is that right?

With gifs my concern is scaling. If they scale. I will have to try it. (Tomorrow.) Thanks.

[tnbnicer]

I would like to say, it works like a charm, except it's still a white page instead of the Animate preloader gif.

It must be my local settings. Apache ratelimit_module? Other 'image' preloaders on other pages work as they should though.

It's getting late. Resume searching for solution tomorrow.

[tnbnicer]

Despite 200kb 'triskai.js' loaded quickly in the browser over my broadband connection; a loader was unnecessary.

I'm inclined to believe that I misunderstood the simper technique. Linked JavaScript files are always loaded in the browser. Luckily it's not 1000kb. That might be a problem.

[tnbnicer · Accepted solution]

<script defer="defer" src="js/triskai.js" ></script>

defer="defer" or just defer -- I believe it's optional -- will defer the execution of the script and allow the loader to run while the script downloads.

I won't mark this as the correct answer, because it's my answer, and may have been posted elsewhere.

[Colin Holgate]

I marked it as Correct, assuming that you were saying that it solves your problem. If it doesn't really solve it, you can unmark it as Correct.

[tnbnicer]

Hi. Yes, I forgot all about defer. Scripts seldom get that large, unless libraries. It solves my problem like a charm.

I'll never make a negative comment about Canvas or Animate again.