0

I have the following javascript which is a loader that is triggered and created when the page is idle. It basically shows whilst the next navigated page is loading. The script resides on the (ASP.NET) master page and an Ajaxified user control.

I need to make the code cross-browser but not sure what the offender is.

It only works happily in Trident (only tested IE9 & 10) - not in Webkit or Gecko.

I'm not sure if it's a notation issue or if the page life cycle for Chrome and Safari don't ever declare themselves as "!= complete" thus not triggering the condition.

I'd also prefer to keep this a pure Javscript solution - no jQuery.

Thanks

loader = 0;
if (window.location.href.indexOf("Login.aspx") < 0) {
    setInterval(function () {
        if (document.readyState != 'complete') {
            document.documentElement.style.overflow = "hidden";
            var navLoader = document.createElement("div");
            var loaderText = document.createElement("div");
            var loaderImg = document.createElement("div");
            navLoader.id = "navLoaderDiv";
            navLoader.className = "navLoader";
            loaderImg.id = "loaderImg";
            loaderText.id = "loaderText";
            loaderImg.className = "loaderImg";
            loaderText.className = "loaderText";
            navLoader.appendChild(loaderImg);
            navLoader.appendChild(loaderText);
            loaderText.innerHTML = "Working on it";
            var zedDepth = 99999;
            navLoader.style.zIndex = zedDepth;
            navLoader.style.background.image = "url(~/Images/loaderHalo2.png) 0 0 / 100% 100% no-repeat";
            navLoader.style.position = "absolute";
            navLoader.style.right = "0px";
            navLoader.style.left = "0px";
            navLoader.style.top = "25px";
            navLoader.style.bottom = "0px";

            if (loader == 0) {
                document.documentElement.appendChild(navLoader);
                loader = 1;
            }
        } else if (document.getElementById('navLoaderDiv') != null) {
            document.getElementById('navLoaderDiv').style.display = "none";
            document.documentElement.style.overflow = "hidden";
        }

    }, 1000)
}
user3300006
  • 13
  • 4
  • Your snippet does not work... According to [this answer](http://stackoverflow.com/questions/5706757/is-there-a-way-to-check-document-ready-if-jquery-is-not-available#5706881), `document.readyState !== 'complete'` works fine in all browsers. – skobaljic Mar 10 '15 at 23:29
  • How are you calling this function? You might want to change `.style.background.image` to `.style.backgroundImage` and maybe it would be a good idea to `clearInterval` if your elements are already in the document – Kaiido Mar 11 '15 at 01:31
  • @skobaljik - thanks for your reply. The snippet works as intended in IE9, 10, 11 just not webkit. However, I have added the extra =. – user3300006 Mar 11 '15 at 04:45
  • @Kaiido - yes backgroundImage is better syntax. If I clear the interval it ceases to continue polling the page status, so it won't fire on the next page navigation. – user3300006 Mar 11 '15 at 04:49
  • hum if you change your page location, document is reloaded and javascript is re-executed. (except for `hashchange` only) – Kaiido Mar 11 '15 at 05:04
  • Thanks @Kaiido - sorry I should have explained the setup as well - the script resides on the (ASP.NET) master page and an Ajaxified user control is changed on navigation therefore the JS doesn't get reloaded - hence why I'm using polling. – user3300006 Mar 11 '15 at 23:13
  • you should edit your question then. + I'm not too much into asp.net (you should also add this tag to your question), but can't you just use an `addEventListener('readystatechange')` instead of polling ? – Kaiido Mar 12 '15 at 02:17
  • I'll check out readystatechange as an alternative - Cheers – user3300006 Mar 12 '15 at 05:39

0 Answers0