javascript - Remove blocking script by detecting if Dom is ready? -

i follow article how remove blocking script detecting if dom ready.

  // check if dom ready   function domready(callback) {     if (document.addeventlistener) { // native event       document.addeventlistener("domcontentloaded", callback, false);     } else if (window.addeventlistener) {       window.addeventlistener('load', callback, false);     } else if (document.attachevent) {       window.attachevent('onload', callback);     }   } 

then inside body, can call

<script>     domready(function () {         loadjs(['https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'         ], function () {                            //alert("all scripts loaded");         })     });  $(document).ready(function (e) { alert($('.abc').text()); }) </script> <div class="abc">safdsfsd</div> 

it doesn't work, there wrong these code. please help.

the full code here @ plnker

one problem you're trying use $(document).ready() before jquery has loaded.

when switched jquery dynamic (non-blocking) loading, means have wait load before attempted use it.

of course, domready() function doing work of $(document).ready() can use instead of put code have put inside $(document).ready() in callback comes loading jquery. @ point in code know dom ready , jquery loaded it's ok use jquery modify dom.

---

in addition, don't have wait dom ready in order load jquery asynchronously won't block page.

you this:

<script>     loadjs(['https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js'         ], function () {                            $(document).ready(function (e) { alert($('.abc').text()); });         })     });  </script> <div class="abc">safdsfsd</div> 

this load jquery asynchronously (non-blocking) , when loaded, set $(document).ready() code.

---

also, have make sure loadjs() loaded since isn't built-in function.