Skip to main content
tnbnicer
tnbnicer
Inspiring
April 21, 2018
Answered

Animate - HTML5 Canvas: problems with loaders

  • April 21, 2018
  • 1 reply
  • 836 views

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.

    This topic has been closed for replies.
    Correct answer 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.


    <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.

    1 reply

    Colin Holgate
    Colin Holgate
    Inspiring
    April 22, 2018

    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
    tnbnicerAuthor
    Inspiring
    April 22, 2018

    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
    tnbnicerAuthor
    Inspiring
    April 22, 2018

    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.

    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices