11

I'm curious which event is fired first when using jQuery and jQuery Mobile.

Oddly enough, the first console output I get is pagebeforecreate then document ready and then onload.

I would like to know if any other events are being fired before these ones.

http://jsfiddle.net/yYGYe/2/

$('html').bind('pagebeforecreate',function(event) {
    console.log("pagebeforecreate");
});

$(document).ready(function() {
    console.log("document ready");
});

window.onload = function(){
    console.log("onload");
};
Jolix
  • 133
  • 1
  • 6

2 Answers2

7

What you're looking for is a comprehensive visualisation of the jQuery mobile event model lifecycle, this diagram below is available in Pro jQuery Mobile and on the author's blog:

jQuery Mobile Events Diagram - Brad Broulik

Please remember that this is jQuery mobile specific. The list of native events is available as part of the W3 spec, and the only one relevant to the document lifecycle is good old load.

Oleg
  • 24,465
  • 8
  • 61
  • 91
  • 1
    DOM Level 3 introduced `DOMContentLoaded`, which fires before `load`. Also, this should be of interest: http://www.w3.org/TR/2011/WD-html5-20110113/the-end.html. – bfavaretto Apr 01 '13 at 02:05
  • @bfavaretto: I was debating whether or not to reference DOM L3 with it being a working draft not uniformly supported yet. You're absolutely right though, +1 – Oleg Apr 01 '13 at 02:30
  • I learned to assume that the HTML, CSS and DOM specifications will be in "working draft" state *forever*! Or *I* would have to wait forever. :) – bfavaretto Apr 01 '13 at 02:51
4

Your question and the actual thing you are asking are a bit different.

You ask what the first event fired is, but in the context you are asking if pagebeforecreate is the function to call if you want it to be the first event fired on the page.

If you read the jQuery Mobile documentation on that matter, it says that pagebeforecreate is called before any "widgets" are instantiated. So in that matter; everything you put in there will be called "before" all jQuery Mobile widgets, but is not per se the first event fired on the HTML page.

The first event fired on an HTML page is probably document.readyState being set as uninitialized, indicating your page is not ready loading yet. These are all ready-states;

  • uninitialized (Has not started loading yet)
  • loading (Is loading)
  • interactive (Has loaded enough and the user can interact with it)
  • complete (Fully loaded)
  • I believe there can be no listeners for _that_ `readystatechange` – John Dvorak Mar 31 '13 at 23:13
  • 1
    `document.addEventListener('readystatechange', function(this) { ... };` should work fine :) But correct me if I'm wrong. Don't have tools at hand to test. –  Mar 31 '13 at 23:15
  • Do you think I can register in time for that event? :-) – John Dvorak Mar 31 '13 at 23:17
  • I mean, if the DOM didn't start loading, the page scripts didn't either. – John Dvorak Mar 31 '13 at 23:20
  • @JanDvorak It's possible to intercept the "interactive" and "complete" states. See http://jsfiddle.net/Gs34Y/. In fact, onreadystatechange is what jQuery uses on oldIE to simulate DOMContentLoaded. – bfavaretto Mar 31 '13 at 23:20
  • I noticed too it's `document.onreadystatechange = function () { console.log(document.readyState); }`, but it seems you can't get all states. Such irony? :P –  Mar 31 '13 at 23:22
  • I've Googled some on the first ready state (`0`, `uninitialized`). It seems it is indeed skipped in most cases on a normal page load and probably can only be catched when loading external content, mostly when working with iFrames. –  Mar 31 '13 at 23:29