I'm curious about people's opinion's and thoughts about this situation. The reason I'd like to lazy load javascript is because
of performance. Loading javascript at the end
of the body reduces the browser blocking and ends up with much faster page loads.
But there is some automation I'm using to generate the html (django specifically). This automation has the convenience
of allowing forms to be built with "Widgets" that output content it needs to render the entire widget (extra javascript, css, ...). The problem is that the widget wants to output javascript immediately into the middle
of the document, but I want to ensure all javascript loads at the end
of the body.
When the following widget is added to a form, you can see it renders some <script>...</script> tags:
class AutoCompleteTagInput(forms.TextInput):
class Media:
css = {
'all': ('css/jquery.autocomplete.css', )
}
js = (
'js/jquery.bgiframe.js',
'js/jquery.ajaxQueue.js',
'js/jquery.autocomplete.js',
)
def render(self, name, value, attrs=None):
output = super(AutoCompleteTagInput, self).render(name, value, attrs)
page_tags = Tag.objects.usage_for_model(DataSet)
tag_list = simplejson.dumps([tag.name for tag in page_tags],
ensure_ascii=False)
return mark_safe(u'''<script type="text/javascript">
jQuery("#id_%s").autocomplete(%s, {
width: 150,
max: 10,
highlight: false,
scroll: true,
scrollHeight: 100,
matchContains: true,
autoFill: true
});
</script>''' % (name, tag_list,)) + output
What I'm proposing is that if someone uses a <div class=".lazy-js">...</div> with some css (.lazy-js { display: none; }) and some javascript (jQuery('.lazy-js').each(function(index) { eval(jQuery(this).text()); }), you can effectively force all javascript to load at the end
of page load:
class AutoCompleteTagInput(forms.TextInput):
class Media:
css = {
'all': ('css/jquery.autocomplete.css', )
}
js = (
'js/jquery.bgiframe.js',
'js/jquery.ajaxQueue.js',
'js/jquery.autocomplete.js',
)
def render(self, name, value, attrs=None):
output = super(AutoCompleteTagInput, self).render(name, value, attrs)
page_tags = Tag.objects.usage_for_model(DataSet)
tag_list = simplejson.dumps([tag.name for tag in page_tags],
ensure_ascii=False)
return mark_safe(u'''<div class="lazy-js">
jQuery("#id_%s").autocomplete(%s, {
width: 150,
max: 10,
highlight: false,
scroll: true,
scrollHeight: 100,
matchContains: true,
autoFill: true
});
</div>''' % (name, tag_list,)) + output
Nevermind all the details
of my specific implementation (the specific media involved), I'm looking for a consensus on whether the method
of using lazy-loaded javascript through hidden a hidden tags can pose issues whether security or other related?
One
of the most convenient parts about this is that it follows the DRY principle rather well IMO because you don't need to hack up a specific lazy-load for each instance in the page. It just "works".
UPDATE: I'm not sure if django has the ability to queue things (via fancy template inheritance or something?) to be output just before the end
of the </body>?
