Adding javascript file in the footer & custom styles

Question

For fast page load I need to insert JS at the end of the page from components and modules.

The following way of declaring scripts does not work to insert it at the bottom because there is no parameter to put it in footer.

$rsws_document  = JFactory::getDocument(); 
$rsws_document->addScript();

So what is the concise ways to fulfill my purpose? If joomla does not provide such functionality then it's a significant drawback for page load speed.

I also want to add custom stylsheets from a module so they are injected to page only once even if same module adds it multiple times in that page -

<style type="text/css"> .classname { color:red; }.....</style>

How can I achieve this?

Answer 1

JDocument->addScript() has options to defer the loading of the script and/or load it async. See the API doc: http://api.joomla.org/cms-3/classes/JDocumentHTML.html#method_addScript

This will allow the browser to load the scripts later in the process, which will help with the pageload time.

There is no API to load the scripts at the bottom of the page. If you need that, you have to use 3rd party extensions or add it to the template directly.

Answer 2

By now I think there's no option to load scripts on the bottom of the page.

For your second question, you could use a static boolean property and set it to true the first time your css is rendered. For following module instances simply test this property to decide if you need to add your css or not.

Maybe a good place to add this static property is a module helper class.

Regards,

Answer 3

$document->addScript() always adds scripts in header section before the tag. So, if you want to load a script file at the bottom of the page then you would need to include the js in that file by simply using <script src="{pathtojacvascriptfile}"></script>

I hope this might help

Answer 4

There is no method to add a script to the footer right now. However you could make a plugin that gets the output, searches for an appropriately named tag, like footer and use str_replace to add in your code.

But you can use these extensions achieve that:

1. ScriptsDown
2. JCH Optimize

Also i found one method. I prefer not to hack the core code, but that's the best I can come up with at the moment.

please check this link - Javascript files includes in footer

I Hope it will help others :)

Answer 5

We use a module called "Blank Module", which allows to put any script (PHP, Java, CSS, HTML, whatever) and choose where to load it (head, body, end of body, etc).

It's free, and I found it totally useful: http://extensions.joomla.org/extensions/core-enhancements/coding-a-scripts-integration/custom-code-in-modules/3668

To move scripts from the to below the body it is a little bit more work. Use this:

Include in the template:

<?php
$head = $doc->getHeadData();
// Remove Scripts
unset($doc->_scripts[JURI::root(true) . '/media/system/js/mootools-more.js']);
?>

Add one "unset" line for each script you need to remove from head. Then add it to the blank module loading at the bottom (debug position?). One plus, if you make different blank modules is that you can only load scripts where needed (like, an module instance only for motools, loading it only on a specific page).

For styles, you can also use Blank Module.

I hope this helps.

Answer 6

I haven't tried by myself yet. You can build a module which displays no HTML, just prints out scripts and styles, but it in the bottom module position on the pages where your other module is displayed.