为什么页面微调器 JavaScript 在 IE11 中不起作用，但在 Chrome 和 FireFox 中起作用？答案

【问题标题】：Why is page spinner JavaScript not working in IE11, but works in Chrome and FireFox?为什么页面微调器 JavaScript 在 IE11 中不起作用，但在 Chrome 和 FireFox 中起作用？
【发布时间】：2017-06-08 00:34:57
【问题描述】：

我组合了一个 Vanilla JavaScript 函数，它检查页面上的元素是否在 X 秒内加载（var timerDelay），如果 DOM 元素仍在加载，X 秒后会显示加载器微调器（<div class="psspinner"></div> )。一旦所有 DOM 元素完成加载，从 DOM 中移除微调器。我整理的内容似乎在 Chrome 和 FireFox 中运行良好，但在 Internet Explorer 11 中却不行。

我使用 jQuery 重新制作了脚本，因为它在带有 Vanilla JS 的 IE11 中不起作用。由于此脚本负责检查页面上是否加载了所有 DOM 元素，因此使用 jQuery 会适得其反，因为它依赖 jQuery 库在脚本触发之前加载。使用 Vanilla JS 不依赖库，加载速度更快。

我不确定为什么下面的函数在 IE11 中不起作用。我尝试了多种方法，例如将querySelectorAll 换成getElementsByClassName，但我尝试过的都没有。有什么建议吗？

这是一个用于在开发环境中提供代码的 JS Fiddle：https://jsfiddle.net/7f1hhezs/

纯 JS 版本：

/**
 * 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 版本：

/**
 * 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(); });

【问题讨论】：

控制台有错误吗？您是否添加了 console.log 行以找出未调用的内容？
不是问题的答案，但document.querySelectorAll('.pspinner')[0] 可以替换为document.querySelector('.pspinner')。可以在setTimeout 回调中进行类似的优化，这似乎是多次查询“.pspinner”。
嗨 epascarello，是的，我添加了 console.logs，没有出现任何错误。我确实在整个函数过程中添加了console.logs，编号为1-8。在Chrome和FF中，数字的排序顺序相同，但在IE中不同。 setTimeout 内的 if 条件（从不是 true 条件）始终为 IE 为 false，而 Chrome 和 FF 都为 true 条件。
感谢克里斯的建议。我绝对欢迎我可以进行任何修改以优化脚本。
如此复杂的设计。为什么不在 html 中包含微调器（隐藏除了微调器之外的所有内容）并在文档完全加载后将其删除？

标签： javascript

【解决方案1】：

你的脚本没有问题，你的 CSS 是问题

您的脚本绝对没问题您可以通过注释掉该事件侦听器以进行加载来尝试它。你看不出为什么没有显示页面加载器，因为 IE 有点不同（一点点，我指的是你的情况，在我看来，IE 只是另一个来自另一个王国（生物王国，“是的，我说的是生物学” ). DOMContentLoaded 在加载事件之后（我说的是几毫秒）或在任一方式之前几毫秒被触发，您的 CSS 在 IE-11 中不起作用，但这不相关，您可能希望将标签更改为 CSS。是的，我稍微更改了您的代码，嗯，如果可以的话，请稍微清理一下；

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);
});

给你！我不是专家它可以优化很多跨越式和不同的方法 可以用来解决这个问题，并且更高效地完成相同的任务，但主题不是关于优化，而是“为什么你的脚本是'不工作”。 您的脚本正常工作您的 CSS 动画不正常！

【讨论】：