Blogger网站JS加载图标在浏览器禁用JS时失效的修复咨询

The core issue here is that your loading overlay relies entirely on JavaScript to hide itself once the page loads. If JavaScript is disabled in the browser, that trigger never fires, leaving the overlay permanently covering your content. Here are two solid solutions to fix this:

Solution 1: Use <noscript> Tag (Quick & Minimal Changes) #

This approach keeps your existing code mostly intact, and adds a fallback style that hides the loading overlay only when JavaScript is disabled.

Update your HTML to include a <noscript> block with targeted CSS:

<div id="load"></div>
<noscript>
  <style>
    #load {
      display: none !important;
    }
  </style>
</noscript>

How it works: #

• When JavaScript is enabled, the browser ignores the content inside <noscript>, so your original JS logic runs as expected—hiding the overlay once the page reaches the complete ready state.
• When JavaScript is disabled, the <noscript> style takes effect, forcing the overlay to hide so users can access your page content.

Solution 2: Reverse Default Visibility (More Robust Logic) #

This method adjusts your default state to keep the overlay hidden initially, then uses JavaScript to show it when the page starts loading. This ensures the overlay only appears if JavaScript is available.

Step 1: Modify your CSS #

Set the overlay to be hidden by default:

#load{ 
    width:100%; 
    height:100%; 
    position:fixed; 
    z-index:9999; 
    background:url("https://www.creditmutuel.fr/cmne/fr/banques/webservices/nswr/images/loading.gif") no-repeat center center rgba(0,0,0,0.25);
    display: none; /* Default to hidden */
}

Step 2: Update your JavaScript #

Show the overlay immediately when the script runs, then hide it once the page loads:

// Show the loading overlay as soon as JS executes
document.getElementById('load').style.display = "block";

document.onreadystatechange = function () { 
    var state = document.readyState 
    if (state == 'complete') { 
        document.getElementById('load').style.display = "none"; 
    } 
}

How it works: #

• If JavaScript is enabled: The script shows the overlay right away, then hides it when the page finishes loading.
• If JavaScript is disabled: The overlay stays hidden by default, so users never see it (and don't get stuck with it).

Testing the Fix #

To verify, disable JavaScript in your browser's developer tools (e.g., in Chrome: DevTools > Settings > Debugger > Disable JavaScript) and reload your page—your content should be accessible without the loading overlay blocking it.

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