DEPRECATION WARNING

This documentation is not using the current rendering mechanism and is probably outdated. The extension maintainer should switch to the new system. Details on how to use the rendering mechanism can be found here.

Administrator Manual¶

As an administrator you configure this plugin via the page's typoscript template.

Installation¶

Please install the extension via the extension manager in typo3.

Configuration¶

Configure the plugin by embedding it via the typoscript template. Therefore click on Web -> Template, select your root page, go to General and add your configuration block to the Setup field.

The javascript and css resources are loaded in 3 stages after the page's HTML and DOM is rendered.

First CssJsAsyncLoader loads the resources given via the typoscript parameters cssLib and jsLib.
After the libs are loaded, CssJsAsyncLoader loads the resources given via the typoscript parameters css and js.
Finally after all files are loaded, CssJsAsyncLoader loads the resources given via finalCss and finalJs.

Tip

Furthermore the loader looks for a javascript function called CssJsAsyncLoaderFiles.endFunction (e.g. for hiding a loading screen). If it exists, it is called after all files are loaded. You can define this function in the javascript code that is loaded by CssJsAsyncLoader, so it will exists, when all files are loaded.

Your configuration block might look like this one (All configuration options are described in the Configuration Reference).

lib.cssjs_asyncloader = USER
lib.cssjs_asyncloader {
   #load plugin
   userFunc = TYPO3\CMS\Extbase\Core\Bootstrap->run
   extensionName = CssJsAsyncLoader
   pluginName = Loader
   vendorName = XiTech

   # Javascript libraries (in one file)
   settings.jsLib.01.file.jQuery = fileadmin/templates/js/jquery-1.4.3.min.js
   # Javascript resources (in one file)
   settings.js.01.file.fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.pack.js
   settings.js.01.file.enable_fancybox = fileadmin/templates/js/enable_fancybox.js
   settings.js.01.minify = 1

   # CSS
   # first file
   settings.css.01.file.fancybox = fileadmin/templates/js/fancybox/jquery.fancybox-1.3.4.css
   settings.css.01.inline.general = body{font-size: 16px;}
   # second file
   # load the css that is included by a plugin and minify it
   settings.css.02.inline.cal_controller < plugin.tx_cal_controller._CSS_DEFAULT_STYLE
   settings.css.02.minify = 1

   # final CSS to remove load screen and show the actual content
   settings.finalCss.01.file.loaded = /fileadmin/css/loaded.min.css
 }
 # Include the plugin at the end of the page
 page.999999 = COA
 page.999999.10 < lib.cssjs_asyncloader
 # Remove CSS that is loaded in the head section by plugins
 plugin.tx_cal_controller._CSS_DEFAULT_STYLE >

If you just want the plugin to be loaded on specific pages use the following code:

[globalVar = TSFE:id = 123|456|789]
...
[global]

That's it.