Skip to main content
Known Participant
June 29, 2023
Question

HTML5 Canvas app slow to load

  • June 29, 2023
  • 3 replies
  • 449 views

Hi everyone!

I have an html5 canvas app with around 346 images (165mb).

I know its a lot of images for an app... The reason is that the app simulates a 3D environment on which, when you scroll left or right, you walk trough that environment as if it was a FPS game.

 

So I made a path on the 3D modelling software, exported the walking animation and exported all the jpg's (total of 266) that make that animation. Then I made the "scrolling" feature on animate.

I've already compressed the bigger JPG's and I cant make them any smaller without noticeably losing a lot of quality.

The issue is that the app is really, really slow to load online when I publish it to the server.

It takes almost a minute the first time it pre-loads.

 

I was wondering if there's any way to optimize it or any tips on how I can better achieve this effect?

Thank you for your attention!

    This topic has been closed for replies.

    3 replies

    AndyPxAuthor
    Known Participant
    October 2, 2023

    Hi @chespio ! Well I have that project "on hold" at the moment (for different reasons) and no, I haven't found a solution and I was actually starting to wonder if I should maybe choose a different platform to make it.

     

    @kglad it definitely takes longer than that

    kglad
    Community Expert
    Community Expert
    October 2, 2023

    how large are your published files?

    kglad
    Community Expert
    Community Expert
    September 29, 2023

    @AndyPx 

     

    does it take longer than you would expect 165+ mb to load?

    chespio
    Inspiring
    September 29, 2023

    Hello Andy! 
    How are you? Have you find or solved some tricks to your issue? 
    I would love to know about them! 

    I'm working on a similar project, using several images to represent a 3D object and rotate it. 
    I am working with about 70 images per model, and showing it in 3 different light situations (70 x 3) 

    Because I'm using the Adobe Animate preloader, it takes too long to preload because of how it works. I found it makes a queue where each file is downloaded individually, one after another, instead of loading them in bulk. Some small files spend more time establishing new connections with the server than actually downloading the data.
    The default preloader is not the best option but until I found a better way I generated my own spriteSheets by making big images containing several frames to reduce the connection time between each file, it has reduced the loading time by 75% 

    Also, I used some blurred low-quality images and replaced them in the background once the project was loaded. 
    In some cases just download the images once the project is started 

    Not a great thing but this is all I got. 
    let me know if you need some clarification, English is my second language