How to add javascripts before AfterBody trigger

fr3em1nd · February 2013

hi, what i'm trying to accomplish in this is making a Example.js script before a </body> tag, which i figured that i would make a class for afterbody, but the issue is i want to have it included in the Minify,
also this $this->AddJsFile('xxx.js'); code works only on making a JS visible inside <head></head> tag. the javascript needs to be loaded after it is shown in the page, just like slides... my workaround would be coding the link directly in script but i would like the file to be inlcluded in the minify to make the site lighter.. any thoughts are accepted

businessdad · February 2013

Usually scripts should be declared in the head. Any particular reason why you need it at the very bottom of the body?

422 · February 2013

90% of developers @businessdad run js in the footer. After the DOM has loaded.

http://stackoverflow.com/questions/5329807/benefits-of-loading-js-at-the-bottom-as-opposed-to-the-top-of-the-document

x00 · February 2013

if you use

   jQuery(document).ready(function($){
        ...
   });

it will load after the dom, this technique

this development of a dom ready technique goes back to at least 2005-2006. If the script is not already using it, then why?

businessdad · February 2013

@x00 said:
if you use
jQuery(document).ready(function($){
...
});

it will load after the dom, this technique

this development of a dom ready technique goes back to at least 2005-2006. If the script is not already using it, then why?

This is precisely what I was thinking. Loading the JS files in the head doesn't mean executing the scripts straight away. Hence, loading them at the bottom of the page doesn't bring any benefit, unless they are not really written properly.

@422, You find me in disagreement. I have met many developers in my career, and all of them would suggest to place the scripts in the <head> section. I seriously doubt that 90% of them would put them at the bottom of the page.

422 · February 2013

For Javascript ?

Are you serious ?

Its been years since the old < place script between head tags > , nowadays with libraries such as jquery etc, which should be loaded in the head section. But all other js should be in the footer.

I seriously disagree with your statement. However if you had read the thread of the link I posted, you can execute the js loading after the dom has loaded, within function tags

You will still see a performance decrease ( even with .ready ) because you shouldnt be performing more than 2 parrallel pings, so the fact your script may be compliant on dom ready, the fact is you still fire off a ping request in order to tell the page , oh no please wait... With people loading 10 + JS files, by declaring dom ready and putting them in footer you maximise the page performance.

x00 · February 2013

Well since most scripts are using some sort framework, or an api, they usually have a dom ready.

If you are doing hand rolled javascript, you can do it, but it is clutters things up.

@businessdad developers disagree on this, however 422 is right. Generally speaking you don't want the delay the loading of the DOM.

There are also some instance where you explicitly don't want it when Dom is ready

I suggest if you do any custom scripts

use

 jQuery(document).ready(function($){
...
});

or

 jQuery(function($){
 ...
 });

Whether or not you intend to use javascript, of course if you are using another framework use their equivalent of DOMReady.

Kasper · February 2013

Yahoo and many others agree with placing scripts at the bottom of the page: http://developer.yahoo.com/performance/rules.html#js_bottom
Like @422 and @x00 mentioned, the reason why you should put your scripts at the bottom is simple: If you don't, they'll block page rendering.

I do it myself too whenever I develop websites and have started doing it too in my Vanilla themes. As for @fr3333333x's question, here's how I do it:

public function Base_AfterBody_Handler($Sender) {

    /**
     *  Insert Foundation JS at bottom of page to avoid blocking
     */
    echo "
        <!-- Included JS Files (Concatenated, uncompressed) -->
        <script src='".$GLOBALS["ThemeRoot"]."/js/foundation.js'></script>

        <!-- Make all forms use Foundation custom inputs -->
        <script type='text/javascript'>$('form').addClass('custom');</script>
    ";

}

P.S.: You can't include the code at the bottom of the page and have it minified with the rest of your JS. It wouldn't make any sense doing that :-)

P.P.S.: Sorry about all the edits, my brain doesn't run well without coffee when it's this late.

x00 · February 2013

External scripts may benefit from being at the bottom as the request itself causes some delay, parallelization may not be ideal in many browsers.

However as a framework perspective, it doesn't make sense to dictate this from the beginning, and if you notice most of them don't. The want something that functions, they will

I would say avoid minifiers if you want to avoid code errors. Minification, and specifically obfuscation is a flawed an imperfect process with javascript, you can't eliminate the chance of it failing. It is only worth using if you can know fro sure it won't cause code errors, as in prior testing. This is not something that is realistic, when adding random plugins. You might not know a function is not workign till later. Not worth the hair pulling.

The performance gain form it is not much, especially with modern client caching.

Concatenation is fine however, obviously in order.

x00 · February 2013

@422 said:

You will still see a performance decrease ( even with .ready )

DOM ready executes after footer, after all the dom is there.

Waiting everything is loaded/rendered such as the old onload has drawback in terms of usability. That can take long too.

You should be telling browsers to cache files, until you update the version.

x00 · February 2013

You have to be carefully too. if something adds some inline script, which is common on some apis, and it references a famework that is not loaded yet becuase it has moved to the bottom, it will break.

fr3em1nd · February 2013

Hi Guys,

It's funny how this turned up to a little argument, as for this problem i have i really need to add the JS file before </body> since it's not functioning.

THanks for your help guys

422 · February 2013

LOL no argument, we all learn as have I today its called , debate ...;)

fr3em1nd · February 2013

i found some usefull stuff that might be helpful for someone who encounters the same problem, for minifying the JS you could use the Minify plugin direct approach for minifying things:

SIMPLIFYING URLS WITH A BASE PATH

If you're combining files that share the same ancestor directory, you can use
the "b" argument to set the base directory for the "f" argument. Do not include
the leading or trailing "/" characters.

E.g., the following URLs will serve the exact same content:
http://example.com/min/?f=scripts/jquery-1.2.6.js,scripts/site.js,scripts/home.js
http://example.com/min/?b=scripts&f=jquery-1.2.6.js,site.js,home.js

mgufrone · July 2013

so, what's the result of this discussion? do all you have any simple plugin to do this? i think i need to do this too, for a good reason

x00 · July 2013

@mgufrone said:
so, what's the result of this discussion? do all you have any simple plugin to do this? i think i need to do this too, for a good reason

Like has been said before it has very many pitfall, and you are likely to encounter them as you change. However if you still want to to it you can use my plugin

http://vanillaforums.org/addon/consolidate-plugin

Using Defer JS to foot option, however I take no responsibility for this.

R_J · July 2013

I think that was the solution

How to add javascripts before AfterBody trigger

Comments