Please upgrade here. These earlier versions are no longer being updated and have security issues.
HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

How to add javascripts before AfterBody trigger

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 :)

Comments

  • businessdadbusinessdad Stealth contributor MVP

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

  • 422422 Developer MVP
    edited February 2013

    There was an error rendering this rich post.

  • 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?

    grep is your friend.

  • businessdadbusinessdad Stealth contributor MVP

    @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. :)

  • 422422 Developer MVP
    edited 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.

    There was an error rendering this rich post.

  • x00x00 MVP
    edited 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.

    grep is your friend.

  • KasperKasper Scholar of the Bits Copenhagen Vanilla Staff
    edited 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.

    Kasper Kronborg Isager (kasperisager) | Freelance Developer @Vanilla | Hit me up: Google Mail or Vanilla Mail | Find me on GitHub

  • x00x00 MVP
    edited 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.

    grep is your friend.

  • @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.

    grep is your friend.

  • 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.

    grep is your friend.

  • 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 :)

  • 422422 Developer MVP

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

    There was an error rendering this rich post.

  • 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

  • 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

  • x00x00 MVP
    edited 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.

    grep is your friend.

  • R_JR_J Ex-Fanboy Munich Admin
    edited July 2013

    I think that was the solution

Sign In or Register to comment.