Defer javascript execution using data

Due to page performance you should load javascript at the end of page (see http://developer.yahoo.com/performance/rules.html), at least all javascript you can defer to load. There are script that have to load at the very begin of page. But are you sure there is no option?

Well, actually this is a critical consideration on my own js script. When I wrote imagedata drupal example module I replaced {‘imagedata …} with a direct call to jquery plugin.

There are a lot of situation where javascript function is called where a data structure could be defined and a “caller function” can use that var to fire up function call.

Also, often execution could/must be deferred in a given order of execution, in order to make things work (have a look at my formhint plugin and problems with facebook like widget). (so defer attribute in script tag is of no use)

That said, it could be used some structure like:

<script>var datastruct = {type:'right',sel:"a > img"};</script>

and at the end of page (at a given time):

{syntaxhighlighter brush:javascript} <script> function functioncall(data){ $(data.sel).contextmenu(menu,data.type,data.timeout); } functioncall(datastruct);</script> {/syntaxhighlighter}

Ok, that’s work, and it could be used an array too …

<script>var datastruct = datastruct || new Array();datastuct.push({type:'right',sel:"a > img"});</script>

(.. here with caller function cycling on array)

But it could be used a more elegant (for me) solution: use script type=”text/html”

<script type="text/html" class="mydatas">{type:'right',sel:"a"}</script>

And a caller function can be:

function caller(class){
  $("."+class).each(function(i,el){
    eval('var m='+$(el).html());
    $(m.sel).contextmenu(menu,m.type,m.timeout);
  });
}

And the time when call function could be defined.


Posted

in

,

by

Tags: