Jquery initialization confusion

Question

Now for whatever reason the original author does something on initialization I can't quite make sense of. There is this code which seems to me to be redundant:

            if (document.addEventListener) {
              document.addEventListener('DOMContentLoaded', init, false);
            }
            (function() {
              /*@cc_on
              try {
                document.body.doScroll('up');
                return init();
              } catch(e) {}
              /*@if (false) @*/
              if (/loaded|complete/.test(document.readyState)) return init();
              /*@end @*/
              if (!init.done) setTimeout(arguments.callee, 30);
            })();
            if (window.addEventListener) {
              window.addEventListener('load', init, false);
            } else if (window.attachEvent) {
              window.attachEvent('onload', init);
            }

            function init()
            {
                if (arguments.callee.done) return;
                arguments.callee.done = true;
                // do your thing
                //[...]
            }

What might the purpose of this be? Or is it nonsense?

the author is just really concerned about the function init() not being called when the page has finished loading in retarded/old browsers (internet explorer, crappy mobile browsers, etc) — hanshenrik, Feb 24 '16 at 01:06
Since you mention jQuery, all this would be handled by `$(document).ready(init);` — Gabriele Petrioli, Feb 24 '16 at 01:09
@GabyakaG.Petrioli not in internet explorer 7, the last IE supported by XP — hanshenrik, Feb 24 '16 at 01:22
@hanshenrik, is that documented somewhere ? (*i would be interested in that info*) — Gabriele Petrioli, Feb 24 '16 at 01:34
As `addEventListener` isn't supported until IE9, `attachEvent` would add support for IE8 and below. However, jQuery supports old IE just fine — adeneo, Feb 24 '16 at 01:37
And here's jQuery's version, it does the same thing, but better -> https://jsfiddle.net/Lb6527vq/ — adeneo, Feb 24 '16 at 01:39
@GabyakaG.Petrioli its something i learned the hard way when my site didn't work for a client using IE7 on XP x.x C.O. pretty much adeneo maybe it was a bug in the jQuery version i was using, dunno — hanshenrik, Feb 24 '16 at 01:41
The 1.x branch should support IE6 and up, while the 2.x branch is IE9+ only — adeneo, Feb 24 '16 at 01:50

score 2 · Accepted Answer · edited May 09 '16 at 15:14

The code is making sure that init() function gets called.

It's binding the init function to event listeners that fire when the DOM or page have been loaded.

If those events have already been fired determined by the readyState then it's calling init directly, otherwise it keeps checking every 30 milliseconds for the readyState.

        // Call init function when DOM is loaded
        if (document.addEventListener) {
          document.addEventListener('DOMContentLoaded', init, false);
        }

        // Immediately invoked function expression that calls init
        // function if doScroll method does not throw error.
        (function() {

          try {
            document.body.doScroll('up');
            return init();
          } catch(e) {}

          // Call init function if DOMContentLoaded event has already been
          // fired or if page is already loaded.
          if (/loaded|complete/.test(document.readyState)) return init();

          // arguments.callee is a reference to it's executing function
          // which is this immediately invoked function expression.
          // It will keep calling it every 30 milliseconds while init
          // has not been called yet.
          if (!init.done) setTimeout(arguments.callee, 30);
        })();


        // Call init function when window is loaded.
        // `load` event is fired after DOMContentReady, when
        // everything has loaded in the page.
        if (window.addEventListener) {
          window.addEventListener('load', init, false);

        // Same as above but for IE versions 8 or less
        } else if (window.attachEvent) {
          window.attachEvent('onload', init);
        }

        function init() {
            // If init has been called then immediately return.
            if (arguments.callee.done) return;

            // Set flag on itself to indicate that it init been called.
            arguments.callee.done = true;
            // do your thing
            //[...]
        }

Thank you. Is there any advantage to `$(document).ready(init);`? Or is this from a time before jQuery was added to the project for some other reason? — C.O., Feb 24 '16 at 01:31
jQuery provides an abstraction for cross browser compatibility. This answer explains $(document).ready() http://stackoverflow.com/questions/799981/document-ready-equivalent-without-jquery — Miguel Mota, Feb 24 '16 at 01:35

Jquery initialization confusion

1 Answers1