Dynamically change background pattern on page load w/ prototype

Question

Similar to Twitter, I am trying to allow a user to upload their own background pattern/image. I am wondering what the best way to dynamically change the background pattern on page load is. I am using prototype w/ rails and have been testing by putting the following in my main layout page:

document.observe('dom:loaded', function(){ $('pattern').setStyle("background-image:url('/images/patterns/pattern.png');") })

This is buggy b/c a different background color loads before it is changed with the javascript. Is there a way to change the css even earlier than the dom:loaded event? Is this the right general approach?

Answer 1

If you don't care about keeping your javascript organized unobtrusively, then as long as your script appears after the $('.pattern') element, you can target it directly without waiting for the rest of the document to get dom:loaded.