This code creates and manages a preloader element, designed to...

August 25, 2025 at 07:10 PM

<div class="ExtPreloader" role="status" aria-live="polite" aria-label="Loading">
  <img src="{{ 'CYME Copenhagen.svg' | asset_url }}" alt="" aria-hidden="true" width="50" height="50" decoding="async" fetchpriority="low">
</div>
<noscript><style>.ExtPreloader{display:none!important}</style></noscript>
<script>
(function(){
  var p=document.querySelector('.ExtPreloader'); if(!p) return;
  var start=performance.now(),min=350,max=550,removed=false;
  if(navigator.connection && navigator.connection.saveData){min=180;max=400}
  function remove(){
    if(removed||!p) return; removed=true;
    p.setAttribute('aria-hidden','true'); p.classList.add('hidden');
    setTimeout(function(){ if(p&&p.parentNode){p.parentNode.removeChild(p);} p=null; },200);
  }
  var maxT=setTimeout(remove,max);
  function done(){ clearTimeout(maxT); var wait=Math.max(0,min-(performance.now()-start)); setTimeout(remove,wait); }
  if(document.readyState==='complete'){ done(); }
  else { window.addEventListener('load',done,{once:true}); }
})();
</script>

This code creates and manages a preloader element, designed to show a brief loading indicator on a webpage while the page is being loaded or processed. Here's what each part of the code does:

HTML

<div class="ExtPreloader" role="status" aria-live="polite" aria-label="Loading">
- This <div> element acts as the preloader. It includes:
  - Accessibility roles to communicate its purpose (e.g., role="status", aria-live="polite", aria-label="Loading").
  - An image (img) inside the <div> that displays a logo (CYME Copenhagen.svg) representing the preloader graphic.
  - The image is optimized for async decoding (decoding="async") and has a fetchpriority="low" to ensure it does not hinder the loading of more critical resources.
Fallback <noscript> block:
- If JavaScript is disabled, the preloader is not displayed (.ExtPreloader{display:none!important}).

JavaScript (Preloader Behavior)

1. Initialization

p=document.querySelector('.ExtPreloader');
- Fetches the preloader <div> via its class.
if(!p) return;
- Stops execution if the preloader element is not found.

2. Define Timing and Behavior

start=performance.now();
- Records the time when the script starts running to calculate how long the preloader has been displayed.
Predefined time limits:
- min=350 ms (minimum display time) and max=550 ms (maximum display time). This ensures the preloader is displayed for a perceptible amount of time.
- Uses navigator.connection.saveData to reduce these times on devices with data-saving mode enabled.

3. Preloader Removal Logic

remove()
- Hides the preloader (aria-hidden="true", adds hidden class) and removes it from the DOM after a short delay (200 ms).

4. Automatic Preloader Removal

Sets a maxT timeout to ensure the preloader is forcibly removed after the maximum display time (max).
If the page finishes loading sooner:
- done() calculates the remaining time to ensure the preloader is displayed for at least min milliseconds.
- Then removes the preloader and cancels the maxT timeout.

5. Event Listener for Page Load

If the page is fully loaded already (document.readyState === 'complete'), it immediately removes the preloader via done().
If the page is still loading, it adds a load event listener to trigger done() once loading completes.

Overall Functionality

The preloader ensures a smooth user experience:
- It displays a visual loading indicator for at least a minimum amount of time and automatically removes itself once the page is ready or after a maximum period.
- It also accounts for users who have data-saving modes enabled by reducing the display time.
- It ensures accessibility for screen readers and has fallbacks for when JavaScript is unavailable.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr