I have a utility that draws a simple arc using SVG or, as a reserve, Canvas. (An earlier version can be found in my Raphael Arcs project on my website.
To host the mobile solution, I recently added code to control the size of the container and, if it has changed, to re-draw the image in accordance with the container of the new size. This add-on only uses the size of the containing div; The code adds an SVG or Canvas object to the DIV.
By reloading the page, sometimes the DIV layout is not ready, even when it $(document).readysays that it is. This is apparently the most common in Chrome; I saw it only once with Opera and never with Firefox 3.6. The height and width of the containing DIV are returned as zero.
If you download the link above in Chrome and click "reload", every tenth hit or so that the Canvas demo will show a similar flaw: it will have a width size: 100% of the viewing area, height: 300 pixels, and the demo will not draw correctly.
I have looked through the jQuery documentation and seem to be insisting that $(document).ready()should be enough. I would prefer that 12% of my users do not experience a browser-related crash. Besides writing my own layout (timeout timeout, again and again, “container size yet?”), Is there a common method or library to ensure that not only the DOM, but also the layout manager is loaded?
[EDIT]
I ended up doing something like this (Coffeescript code):
$(document).ready ->
$('.wrapper').each ->
demo = =>
c = new CanvasArc $('.canvas_demo', this)
c.sweep(1.0)
r = new RaphaelArc $('.raphael_demo', this)
r.sweep(1.0)
scan = =>
if $('.canvas_demo', this).height()
demo()
else
setTimeout(scan, 100)
scan()
I really don't need to do this.