Internet Explorer CSS/JS问题：预加载器持续显示且Owl Carousel无法工作

Hey Andrew, let's break down why your preloader is stuck and Owl Carousel isn't running in Internet Explorer—even though jQuery is working fine. IE is notoriously finicky with modern JavaScript and CSS, so here are actionable fixes to resolve this:

1. Check for ES6+ Syntax Errors #

Internet Explorer (especially IE11 and older) doesn’t support modern JavaScript features like arrow functions (() => {}), let/const declarations, or template literals. If your custom scripts or even third-party code uses these, IE will throw a syntax error and halt all subsequent JS execution—including the code that hides your preloader and initializes Owl Carousel.

• How to debug: Open IE’s Developer Tools (press F12), go to the Console tab, and look for syntax error messages. This will tell you exactly which line is causing the issue.
• Fix: Either use Babel to transpile your code to ES5, or manually replace ES6 syntax with ES5 equivalents. For example, replace arrow functions with traditional function() declarations, and swap let/const with var.

2. Fix Owl Carousel Compatibility with IE #

Owl Carousel 2 has known quirks in IE, especially with animations and initialization:

• Update to the latest version: Older versions of Owl Carousel have unpatched IE bugs. Make sure you’re using the most recent stable release.
• Add CSS vendor prefixes: IE requires specific prefixes for CSS transforms and transitions. For example, add -ms-transform alongside transform, and -ms-transition alongside transition. You can use a tool like Autoprefixer to automatically add these prefixes to your CSS.
• Test initialization options: Some Owl Carousel options (like loop: true) can cause issues in IE. Try disabling problematic options temporarily to see if the carousel loads, then find IE-friendly workarounds (e.g., manually clone slides for looping instead of relying on the built-in option).

3. Resolve the Stuck Preloader #

The preloader is likely stuck because the JavaScript code that hides it isn’t running (due to earlier errors). Here’s how to fix that:

• Use the correct load event: IE can have inconsistent behavior with DOMContentLoaded. Instead, bind your preloader removal code to the window.load event, which waits for all assets (images, scripts, styles) to fully load:

  $(window).on('load', function() {
    // Code to hide preloader, e.g.:
    $('.preloader').fadeOut();
  });
  

• Ensure execution order: Make sure the preloader removal code runs after all dependent scripts (including Owl Carousel) have loaded. Place your custom scripts at the end of the <body> tag, after jQuery and Owl Carousel scripts.

4. Add Essential Polyfills #

IE lacks support for many modern JavaScript APIs that Owl Carousel or your custom code might rely on (like Array.prototype.forEach, Promise, or Object.assign).

• Fix: Include a polyfill library like core-js in your project. Load the polyfill script before any other JavaScript files to ensure all APIs are available to IE. You can download the library locally and add it to your project instead of using external links.

Start with checking the IE Console for errors—that’s the fastest way to pinpoint the root cause. Once you fix syntax issues or add missing polyfills, both the preloader and Owl Carousel should work as expected. Feel free to share specific error messages or code snippets if you need help debugging further!

内容的提问来源于stack exchange，提问作者Andrew Woodard