I was wondering whether there was any way to load additional files during the loading of a web page. I'm trying to integrate a JavaScript templating engine into my site and would like to keep my templates in external files, and not have to load those templates asynchronously but instead to specify the required templates somewhere in the page and use their contents(which would have been loaded along with the web page) within JavaScript.
Is there any means of achieving such a functionality?
Loading additional HTML files synchronously along the document is difficult. if not impossible. You would have to load javascript files that return an HTML string, or possibly use frames.
But many templating languages lets you define templates directly in the HTML code, f.ex Handlebars:
<script id="entry-template" type="text/x-handlebars-template">
template content
</script>
You can also use Node or other backend languages to pull templates from a directory and create a global Template object that contains all template strings.
When I develop using front end templates, I use separate template files and Ajax when developing, then we have a node.js script that pulls all templates and places them in a global object instead inside the main HTML request, for faster access.