Home > Software development, javascript > Safari window.onload timing issue

Safari window.onload timing issue

I ran into some Safari related timing issues at work, that I thought were worthy of a post.  To preface the post I’m using the dojo framework.  On to the post…

I needed to position a flash overlay relative to the absolute postion of a div that will vary in position on subsequent page loads.  So in comes the handy dojo.coords(id) function wrapped in a dojo.addOnLoad.  This works like a charm in firefox 3, ie 6, ie7 and google chrome.  In safari, no dice.  The offsetTop and offsetLeft calculations were completely off (I tried this with my own custom function as well as dojo.coords())  I was finally able to get this to work with using a setTimeout delay (hack).

After researching the issue it seems apple decided to make window.onload fire “before” the page loads.  (Seems counterintuitive to me, but it’s no wonder it’s so fast in benchmarks)  This explains the miscalculation of element positioning on the page.  Waiting for the page to load with a timeout fixes the problem.  The solution is a hack and is obviously not fool proof as in there is no real barrier to execution.  Does anyone in the interweb out there know how to get Safari to fire onload as in when the page actually finishes loading?  Knock knock.

  1. March 14th, 2011 at 11:31 | #1

    You may have already found a solution, or there may be some reason this wouldn’t work for you, but as an alternative to the timeout, you might be able to force Safari’s JavaScript execution to pause your function until layout is complete by inserting a call to document.body.offsetWidth prior to your other calculations.

    I can’t remember where I first encountered this tip, but there’s a description of it here: http://www.howtocreate.co.uk/safaribenchmarks.html

  2. March 16th, 2011 at 02:16 | #2

    Ah interesting. This was so long ago I don’t fully remember the overlay or campaign I was working on at Estee Lauder. It was all a blur.

  1. No trackbacks yet.