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