Digital Workshop

Looking for the best way to display a loading animation whilst the page downloads. Google suggests that the page's associated js file and the opus.js file are downloading before the page is rendered, plus there is also about 1mb of html. The things happening after the page is visible (images/sounds etc) are not a problem - just the 3s+ black screen before anything is visible.

Wondering what the solution would be here. Ajax? Never used it and not sure how to incorporate it.

Thanks
Dan

Scripts can be downloaded before or after the HTML has been loaded. Don't mess with the Opus.js but custom scripts that are not needed until the publication is ready, can use the defer attribute:

http://www.w3schools.com/tags/att_script_defer.asp

Ajax may solve your problem, it's not a one size fits all though. The basic principle is that you create your index page and use XHR (XMLHTTPRequest) to load the data (your Opus publication) - this happens in the background, so a waiting page / indicator could be displayed.

After the data has loaded, an event is triggered and you need to process that data - in this case load it into the DOM (the HTML index page). Depending on the AJAX method employed you may need to process the JavaScript before or after the data loads into the DOM.

After the data and scripts have all load, you will probably need to initial the first page of the publication which can be done by using the start method on the first page object.

I would recommend starting with a simple clean publication to understand the process. Then when you move on to your actual project, ensure that you test all function and do this in the browsers you intend on supporting.

</mack>

Thanks Mac. The other js file I referred to is the 'External JavaScript File' generated as an option on publication. It's full of unrecognisable dw scripting, so not something I can play with I don't think. It should be cached I presume but still a new file for each page.

Will have a play with the ajax methods.

Cheers
Dan

Hi Dan,

That reads as if your creating a multi-page application? I'm not sure how effective AJAX will be be on that type. Are you expecting each page to preload or just the first?

As for the external JS, you will probably need to publish this way anyway as you'll need to add the script to the header of the index.htm to be parsed once the AJAX data has been added to the DOM.

</mack>