How did you manage to get the preloader to work? I am having a similar issue.
For your loading time, something you should do is add up the total amount of data that your animation needs to load before it can kick off. This is your .js files, and all of the image files associated. Use the "Save for Web" function in Photoshop and Illustrator, and try to make sure that they aren't any bigger in resolution than what you'll need them to be when displaying on your site.
I've already compressed the images much and in case I compress any further they will lose quality. They have been saved as 'save for web'.
Regarding getting the preloader working I followed the video mentioned below:
Once I got the preloader centered I edited this code in the html file which is published by adobe edge. The edited/added portion has been highlighted as bold:
<body style="margin:0;padding:0;height:100%;overflow:hidden; background-color:#333;">
And the preloader was working while the site was loading up.
In case if you have any other suggestion to speed up the site loading time, lemme know.
The site is complete and can be seen here: http://www.SheenWynds.com
The entire site is around 3MB and has total of 10 different backgrounds (each between 80kb to 110kb) and other images also along with the content.
1 person found this helpful
The site only took about 3 seconds to load for me, but there are a couple of things I would do to improve the image quality.
First, I would adjust the stage dimensions so it stays proportional. Right now, the animation is loading at whatever size the browser window is, and that is causing the rest of the imaged to stretch. Having a smaller stage with some blank space around is a lot better than having a 100%x100% stage that has everything stretched.
If you want to improve image quality and reduce load time, split the animation up into different web pages. It would take away some of the transitions between categories, but the application would only need to load one peice at a time.