• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

HTML5 Canvas app slow to load

Community Beginner ,
Jun 29, 2023 Jun 29, 2023

Copy link to clipboard

Copied

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!

Views

142

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Sep 29, 2023 Sep 29, 2023

Copy link to clipboard

Copied

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 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Sep 29, 2023 Sep 29, 2023

Copy link to clipboard

Copied

@AndyPx 

 

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Beginner ,
Oct 02, 2023 Oct 02, 2023

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Oct 02, 2023 Oct 02, 2023

Copy link to clipboard

Copied

LATEST

how large are your published files?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines