爲什麼頁面微調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中使用？

回答

相關問題