Why is page spinner JavaScript not working in IE11, but works in Chrome and FireFox?

Question

I put together a Vanilla JavaScript function that checks to see if elements on the page are loaded within X seconds ( var timerDelay ), and after X seconds if DOM elements are still loading, a loader spinner is shown ( <div class="psspinner"></div> ). Once all DOM elements have finished loading, remove the spinner from the DOM. What I've put together seems to work fine in Chrome and FireFox, but not in Internet Explorer 11.

I've remade the script using jQuery since it doesn't work in IE11 with Vanilla JS. Since this script is responsible for checking if all DOM elements are loaded on the page or not, using jQuery is counterproductive because it relies on the jQuery library to load before the script will fire. Using Vanilla JS does not rely on a library, and would load much faster.

I'm not sure why the below function doesn't work in IE11. I've tried a combination of things, such as swapping out querySelectorAll with getElementsByClassName , but nothing I've tried works. Any suggestions?

Here is a JS Fiddle for providing the code in a dev environment: https://jsfiddle.net/7f1hhezs/

Plain JS Version:

/**
 * Page Load Spinner
 * - Add Spinner to DOM
 * - Vanilla JS
 */
function pSpinner() {
    var timerDelay = 0;
    var spinnerHtml = '<div class="pspinner"></div>';

    // Append HTML to body
    var appendSpinner = document.body.innerHTML += spinnerHtml;

    // Initiating setTimeout before showing spinner
    setTimeout(function () {

        if (document.querySelectorAll('.pspinner').length > 0) {
            console.log('loaded');

            document.querySelector('.pspinner').setAttribute('style', 'display: block; opacity: 1.00;');
        } else {
            console.log('false');

            return false;
        }
    }, timerDelay);

    // Remove spinner once DOM load completes
    window.addEventListener('load', function () {
        var removeElem = document.querySelectorAll('.pspinner')[0];
        removeElem.parentNode.removeChild(removeElem);
    });
}

document.addEventListener('DOMContentLoaded', function () {
    pSpinner();
});

jQuery Version:

/**
 * Page Load Spinner
 * - Add Spinner to DOM
 * - jQuery
 */
function pSpinner() {
    var timerDelay = 2500;
    var spinnerHtml = '<div class="pspinner"></div>';
    var spinnerSel = $('.pspinner');

    // Append HTML to body
    var appendSpinner = $('body').append(spinnerHtml);

    // Initiating setTimeout before showing spinner
    setTimeout(function () {
        $('.pspinner').css({ display: 'block' });
        $('.pspinner').animate({ opacity: 1.00 }, 150);
    }, timerDelay);

    // Remove spinner once DOM load completes
    //window.addEventListener('DOMContentLoaded', function () {
    window.addEventListener('load', function () {
        $('.pspinner').remove();
    });
}
$(document).ready(function(){ pSpinner(); });

Answer 1

There Is No Issue With Your Script, Your CSS Is The Problem

Your script is absolutely fine You can try it by commenting out that event listener for load. You can't see why page loader is not being showed because IE is little different(by little, I refer to your case, in my opinion IE is just another from another Kingdom (kingdom of living things, "yeah I am talking Biology"). DOMContentLoaded is fired either after the load event (I am talking few MS) or few ms before either ways, Your CSS does not work in IE-11, But that is not related, you might want to change tag to CSS. and yeah I changed your code A little bit, umm cleaned it a little bit if you may;

var spinnerHtml = '<div class="pspinner"></div>';
document.body.innerHTML += spinnerHtml;
var spinner = document.querySelector('.pspinner');
document.addEventListener('DOMContentLoaded',function pSpinner() {
    var timerDelay = 0;
    setTimeout(function () {
        if (spinner) {
            console.log('loaded');
            spinner.setAttribute('style', 'display: block; opacity: 1.00;');
        } else {
            console.log('false');
            return false;
        }
    }, timerDelay);
});
//try commenting out code below you'll know function is running
window.addEventListener('load', function () {
    spinner.parentNode.removeChild(spinner);
});

Here You go! I'm not an expert it can be optimized much by leaps and bound and different approach can be applied to solve this problem, and to do same task much efficiently , but topic isn't about optimization it is "Why your script isn't working" . Your script is working your CSS animations are not!