为什么页面微调JavaScript不能在IE11中工作，但可以在Chrome和FireFox中使用？

我放在一起香草JavaScript函数检查，看看是否在页面上的元件X秒（var timerDelay）内加载，并且之后如果DOM元素X秒仍在加载，加载器旋转器被示出（<div class="psspinner"></div>）。一旦所有DOM元素完成加载，从DOM中删除微调器。我已经把似乎是在Chrome和Firefox中正常工作，但无法在Internet Explorer 11为什么页面微调JavaScript不能在IE11中工作，但可以在Chrome和FireFox中使用？

我重拍使用jQuery的脚本，因为它没有在IE11与香草JS工作。由于该脚本负责检查是否所有DOM元素都加载到页面上，所以使用jQuery会适得其反，因为它在脚本启动之前依靠jQuery库加载。使用Vanilla JS不依赖于库，并且加载速度会更快。

我不知道为什么下面的功能不会IE11工作。我已经尝试了一些组合，比如将querySelectorAll与getElementsByClassName交换出来，但是我没有尝试过。有什么建议么？

这里是一个JS捣鼓在一个开发环境中提供的代码：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(); });

来源

2017-01-23 Pegues

是否有在控制台中的任何错误？您是否添加了console.log行来找出没有被调用的内容？ – epascarello

不是一个问题的答案，但'document.querySelectorAll（ 'pspinner '）[0]'可以用'document.querySelector代替（'。pspinner'）'。类似的优化可以在'setTimeout'回调中进行，它似乎多次查询'.pspinner'。 – Chris

嗨epascarello，是的，我添加了console.logs，没有错误出现。我在整个函数过程中添加了console.logs，编号为1 - 8.在Chrome和FF中，数字的顺序是相同的，但在IE中不同。 ''setTimeout'内部的if条件（从来不是真实条件）IE总是打假，而Chrome和FF都达到了真实条件。 – Pegues

有任何问题与你的脚本，你的CSS是问题

你的脚本是绝对没问题，您可以通过注释掉该事件侦听器负载尝试。你不明白为什么页面加载程序没有被显示，因为IE是有点不同（少一点，我指的是你的情况，在我看来，IE是另一个来自另一个王国（生物王国，“是的，我在说生物学” ）DOMContentLoaded会在加载事件（我说的是很少的MS）之前被触发，或者在任何一种方式之前几毫秒都会触发，您的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动画都没有！

来源

2017-01-24 05:32:37

为什么页面微调JavaScript不能在IE11中工作，但可以在Chrome和FireFox中使用？

回答

相关问题