Media and putting javascript last

[Wes Winham]

== Quick summary ==

I want to find a consistent way of putting media.css at the top and
media.js at the bottom while still allowing jquery stuff in the
document body.

== Reason I want the JS at the the bottom ==

I'm a big fan of the yslow (http://developer.yahoo.com/yslow/) addon
and Yahoo's recommendations for improving user experience in regard to
page load time and responsiveness. One of the recommendations I've
personally found most useful is that CSS should go at the top and JS
should go at the bottom to improve rendering speed and allow your page
to be "loaded" as quickly as possible (even if there's still some JS
stuff going on, your users likely won't notice it).

== Reason I need the jquery include at the top ==

For several jquery widgets I use (a wymeditor widget, autocomplete
widget, jquery calendar widget), I've written the django widget such
that it does any initialization and setting up using $(document).onLoad
() so that I don't have to worry about adding any javascript for
specific widgets in the template. It's all handled through python so
that the designer side doesn't have to worry about it. Because of the
onLoad() usage, I need jquery at the top (so that all of the stuff in
the body can use it).

== Problems with re-usable widgets and class Media ==

All of my widgets obviously have the Media.js element set with jquery
and their required libraries (my favorite Django 1.0ish feature, btw)
which works wonderfully except for the fact that if I was to do
{{ media.js }} after I've already included jquery at the top of the
page, I get lots of problems for having jquery included twice. I'd
like to go the Pinax route and include jquery in my base.html so that
it's on every page (since I use it on almost every page), but then I
need a method of extracting out any jquery includes for any of my
media elements. I could do that in every view, but it seems like there
must be easier way to do it from one location.

== Ideas for removing jquery includes from all media objects ==
1. I first looked in to a context processor, but then I realized that
you could only add/overwrite context and not alter it.
2. Now I'm considering some kind of form subclass that will strip out
the jquery stuff

Does anyone have any suggestions on a better way to keep my jquery
include and my css at the top and all the rest of my javascript at the
bottom while avoiding including jquery twice?

thanks
-Wes

[Justin Lilly]

The way I structure this is I put my jquery include at at the top with
the css. At the bottom of my script, I add an {% block extra_script %}
{% endblock %} block just before the </body> tag which is where excess
javascript goes. Any reason this wouldn't work for you as well?

-justin

[Wes Winham]

> Any reason this wouldn't work for you as well?

The problem with that is that when I do {{ form.media.js }} (or
whatever media output stuff I need to do) at the bottom, I'm going to
have included jquery twice since jquery is a requirement in the Media
class of any widgets/forms that need it. The trick is trying to not
have jquery in there twice.

-wes