Implementation of Page Preloading Progress Bar Based on Image Loading Progress

Introduction

In modern web development, page loading experience significantly impacts user satisfaction. The traditional $(document).ready() method, while executing code when DOM is ready, cannot accurately reflect the complete loading status of page resources, especially for pages containing numerous images.

Problem Analysis

The original approach using $(document).ready(function(){ $('#page').fadeIn(2000); }); only implements a simple fade-in effect without providing genuine loading progress feedback. The main limitations of this method include:

• Inability to perceive loading progress of resources like images
• Fixed time delays cannot adapt to different network environments
• Lack of visual loading status indication

Solution Design

HTML Structure Design

First, create an overlay covering the entire page:

<div id="overlay">
  <div id="progstat"></div>
  <div id="progress"></div>
</div>

Where #overlay serves as the overlay, #progstat displays loading percentage, and #progress acts as the progress bar container.

CSS Styling Implementation

Ensure the overlay always remains on top of the page through CSS:

#overlay {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 1s 0.4s;
}

#progress {
  height: 1px;
  background: #fff;
  position: absolute;
  width: 0;
  top: 50%;
}

JavaScript Core Logic

Implement image loading tracking and progress updates:

const el = (sel, par) => (par || document).querySelector(sel);

function loadbar() {
  const elOverlay = el("#overlay");
  const elProgress = el("#progress");
  const elProgstat = el("#progstat");
  const images = document.images;
  const tot = images.length;
  let c = 0;
  
  if (tot == 0) return doneLoading();

  function imgLoaded() {
    c += 1;
    const perc = Math.floor(100 / tot * c) + "%";
    elProgress.style.width = perc;
    elProgstat.textContent = `Loading ${perc}`;
    if (c === tot) return doneLoading();
  }

  function doneLoading() {
    elOverlay.style.opacity = 0;
    setTimeout(() => {
      elOverlay.style.display = "none";
    }, 1200);
  }
  
  [...images].forEach(img => {
    const tmpImg = new Image();
    tmpImg.onload = imgLoaded;
    tmpImg.onerror = imgLoaded;
    tmpImg.src = img.src;
  });
}

addEventListener('DOMContentLoaded', loadbar, false);

Technical Points Analysis

Image Loading Tracking Mechanism

By creating new Image objects and setting onload and onerror event listeners, ensure accurate capture of each image's loading status. This approach is more reliable than directly listening to existing images' loading events.

Progress Calculation Algorithm

Use Math.floor(100 / tot * c) to calculate loading percentage, ensuring progress values are always integers. When all images are loaded, call the doneLoading() function to execute fade-out animation.

Event Trigger Timing

Begin loading tracking immediately after the DOMContentLoaded event triggers, ensuring resource monitoring starts as soon as DOM structure is ready.

Solution Comparison

Compared to the simple preloading solution in Answer 2, this solution offers the following advantages:

• Provides genuine loading progress feedback
• Adapts to varying amounts of page resources
• More accurate loading completion judgment
• Better user experience

Optimization Suggestions

In practical applications, consider the following optimization measures:

• Add loading timeout handling mechanisms
• Support tracking of other resource types
• Provide custom loading animation options
• Integrate performance monitoring data

Conclusion

The page preloading progress bar solution based on image loading progress effectively enhances user experience by providing precise resource loading tracking and real-time progress feedback, offering users more intuitive loading status indication. This solution demonstrates good scalability and adaptability, suitable for web projects of various scales.