How to use a JavaScript loader like head.js or labjs in Magento

Question

Off the bat Magento comes with more than half a dozen JavaScript libraries which do not help with the already cumbersome load times. Has anybody been able to successfully use a script loader like head.js or labjs with Magento so that they can load asynchronously? I have been trying but can't get it to work.

Seems as though the in-line scripts on the pages are firing before the libraries are loaded. I know that head.js has a function like head.ready to tell a script to execute , but there are so many in-line scripts it is not practical to add this to every occurrence in the whole site.

score 4 · Accepted Answer · answered Apr 04 '11 at 00:21

Regarding the inline scripts, there is a programmatic solution.

You could write an Observer that binds to the core_block_abstract_to_html_after or controller_action_layout_render_before Events which fire immediately prior to outputting the rendered HTML. In your Observer, you could use a preg_replace to insert a head.ready statement immediately after each <script> tag.

It would add a fraction more to the render time, but I suspect it would be less than the latency of downloading the libraries. And if you're using full page caching, then the function would only be called once.

You could use the inbuilt Magento Profiler to test the impact. Worth a try at least.

HTH,
JD

this looks promising, will have a go and report back – Matthew Dolman Apr 04 '11 at 13:35 — Matthew Dolman, Apr 04 '11 at 13:35

score 2 · Answer 2 · answered Apr 03 '11 at 17:24

2

well, i use jquery for this. and it works great.
All you have to do is to make an ajax request that returns the script and then evaluate the script using eval. You can write your own function for this, but jquery already has some nice approaches.
For single scripts, the $.getScript function works well. It's basically an extension of the $.ajax function that specifies that you are requesting a script. the syntax is like this :

$.getScript('my_script_url',function(){
    // do whatever needs to be done after the script loads
    alert('my script was asynchroniously loaded');
});

If you have more scripts that you want to add through ajax, jquery has a neet way of doing this :

$.when(
    $.getScript("/script_1.js"), 
    $.getScript("/script_2.js"), 
    $.getScript("/script_3.js")
    // ...
    //$.getScript("/script_n.js")
).then(
    // on succes
    function(){
        alert('good to go!');
    },
    // on failure
    function(){
        alert('loading failed. one or more scripts encountered a problem :(');
    }
);

answered Apr 03 '11 at 17:24

gion_13

41,171
10
96
108

thanks, does this solve the problem of the masses of inline scripts in Magento? Will this method make everything inside a – Matthew Dolman Apr 03 '11 at 18:17
sry, but it doesn't work that way. you cant force a script not to execute, but you can write your code in a manner that will allow you to load all the libraries and then and only then execute your logic. – gion_13 Apr 03 '11 at 18:30
unfortunately Magento is already written for me (and in this case badly it seems), so it seems there is no way around the problem :( thanks for the reply. – Matthew Dolman Apr 03 '11 at 18:50
This approach requires the same thing I said all approaches will require--modifications to all existing scripts on the page to whatever the chosen methodology is. – JAAulde Apr 04 '11 at 00:27

score 0 · Answer 3 · answered Apr 02 '11 at 19:31

0

All loaders of this nature are going to require some modification to every script on your site. I know--I just implemented LABjs on a system which, when I grepped, showed over 400 files with some sort of script tag!!

answered Apr 02 '11 at 19:31

JAAulde

19,250
5
52
63

How to use a JavaScript loader like head.js or labjs in Magento

3 Answers3