javascript - non-jQuery .ready() alternative that executes BEFORE jQuery's .ready(), unlike DOMContentLoaded -

i'm making non-jquery-dependent plugin which, play nicely various existing popular jquery features , plugins, must execute function after end of dom has been reached, not after execution of later queued using jquery .ready().

the standard non-jquery .ready() alternative document.addeventlistener("domcontentloaded",function(){});.

if page has functions deferred using both jquery .ready() , domcontentloaded:

• all jquery .ready()s execute in order defined
• ...then domcontentloadeds execute, in order defined:

...and both occur between interactive , complete document readystates:

 document.addeventlistener("readystatechange", function () { alert(document.readystate); });    document.addeventlistener("domcontentloaded", function(event) { alert(1); });                              $(document).ready(function(){ alert(2); });    document.addeventlistener("domcontentloaded", function(event) { alert(3); });    $(document).ready(function(){  alert(4); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

what can use document.addeventlistener("domcontentloaded") not pre-empted , jquery .ready()s this?

to clear exact timing, in particular case, can guarantee time-crucial code queued before .ready()s queued, answers append same queue .ready() solve problem, not answers pre-empt all .ready()s. pre-empting .ready()s preferable, since applicable wider range of cases.

---

(bonus points clear simple explanation jquery's .ready() causes execute before document.addeventlistener("domcontentloaded") regardless of when defined, can't figure out)

it has nothing .ready() call itself, has fact jquery loaded before code example.

jquery adds event listener domcontentloaded/load when loaded, time code example runs jquery has listener added. fired before listeners in example.

the browser goes through these steps

1. browser loads jquery.js
2. jquery initializes , adds listener on domcontentloaded/load
3. your code runs adds listener on domcontentloaded , adds .ready() callbacks
4. domcontentloaded triggered
5. jquery's listener in queue before others gets fired first
6. jquery executes each .ready() callback in succession
7. all other domcontentloaded listeners in queue fired next

now can have yours called first putting addeventlistener code before inclusion of jquery

<script>     document.addeventlistener("domcontentloaded", function(event) { alert(1); }); </script> <script src="jquery.js"></script> <script>     document.addeventlistener("domcontentloaded", function(event) { alert(3); });     $(document).ready(function(){ alert(2); });     $(document).ready(function(){  alert(4); }); </script> 

demo

<script>      document.addeventlistener("domcontentloaded", function(event) { alert(1); });  </script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <script>      document.addeventlistener("domcontentloaded", function(event) { alert(3); });      $(document).ready(function(){ alert(2); });      $(document).ready(function(){  alert(4); });  </script>

if not have control on placement of code, might out of luck. try using interval timer executed (ie every millisecond) , check if dom ready , when execute code. there no guarantee executed first.