Official Update from Olark: "hey folks, just posted up some new information about how we load Olark after all other parts of the page, hope this helps explain how we improved times. if you grab the latest code from www.olark.com/install you should be all set :)"
Olark has stalled my document ready event from firing one too many times! Yes, they're pretty fast most of the time, but still, it's time I could shave off.
The problem
Olark gives you one code snippet to add to the bottom of your dom, right before the end body tag. It creates a div with some info in it, then loads an external js library and initializes olark. The whole time it does that, your document ready bound events are still waiting. If olark takes some time, anything you setup in the ready event handler will not actually work, including more event binds. Most use cases for the document ready event handler are to attach more event handlers to the dom that's now rendered out. Without the dom finishing, there's no way to attach these js event handlers. Since Olark could potentially block these from binding, you're left with a limbo stage where your users aren't firing off the correct js events.
The Goal
Render the divs Olark requires at the end of the dom, but loading the external olark js and initializing should come absolutely last, even after all other js in other document ready event handlers.
The Tools
I'm using jQuery to do some nice javascripting here, you can probably find equivalent ways to do it with your own javascript library or you can write them by hand. I'm also using the Rails framework, so you'll see me say partials and the gists also shows them, etc.
First step
Dissect the snippet of code Olark gives you into parts (in this case I'm using partials in Rails found in app/shared/_olark.html.erb and app/shared/_olark_script.html.erb). Then use jQuery's awesome getScript function to actually fetch the script, and on success call the initialization function.
Second step
Put the script part right before the end head tag, basically after any other javascript that runs in the head. It's just a bit of text, so it won't slow anything down on initial page render. For Rails users, I have it in my application.html.erb layout file, after all the javascript_include_tags renders, right before the end head tag. The purpose here is to make sure this runs after all other document ready event handlers. Olark is probably the lowest priority for rendering on your page. See gist after the third step for the code example.
Third step
Put the div part right before the end of the body tag as usual. It's not going to be slow to just put in one div and one a tag here. Example below
Done
That should basically be it. Olark js and initialization will now happen after all your other document ready event handlers.
(photo taken a few weeks ago when I went on a spontaneous shoot in San Francisco. It was really windy so the cloud movement was perfect)
