关于window.load函数的困惑：两种函数差异与执行异常问题

Hey there! Let's break this down for you. First off, yes—there are definitely differences between the two approaches you're using, and that's likely why you're seeing that occasional failure when loading 100+ images.

Since you didn't share the exact code for your two functions, I'll cover the most common methods used for this scenario and their key distinctions:

1. Using window.onload #

This event fires only after every resource on the page has finished loading—that includes all images, stylesheets, scripts, even iframes. It’s a simple, catch-all solution, and it’s reliable as long as every resource loads successfully. The downside? It waits for non-image resources too, which can delay your page reveal if you have heavy scripts or styles.

2. Manual Image Load Tracking (e.g., counter-based) #

This usually involves looping through all <img> elements, attaching load event listeners to each, and incrementing a counter until it matches the total number of images. Once the counter hits the total, you trigger your "show page" logic. This approach targets only images, but it’s prone to edge cases that cause it to fail.

Why the Second Approach Might Fail Occasionally #

Here are the most likely culprits for that random non-execution:

• Uncaught Image Errors: If even one image fails to load (404, network blip), its load event never fires. Your counter never reaches the total, so your finish logic never runs. You forgot to handle the error event!
• Cached Images: Browsers cache images aggressively. If an image is already in the cache, its load event might fire before you attach the listener. You miss that count, and the counter stays short of the total.
• Dynamic Images: If some images are added to the DOM after you set up your listeners, those won’t be tracked at all.

Fixes to Make the Second Approach Reliable #

Let’s fix those edge cases to get consistent results:

• Handle error Events: Attach both load and error listeners to each image. Treat errors as "loaded" (or handle them explicitly, but don’t let them block your finish logic unless you need to).
• Check for Pre-Loaded Images: Before attaching the listener, check if the image’s complete property is true and its naturalWidth is greater than 0 (this confirms it’s actually loaded, not just marked as complete due to an error). If so, increment the counter immediately.
• Use Promises for Cleaner Tracking: Wrap each image’s load/error state in a Promise, then use Promise.allSettled() (instead of Promise.all()) to wait for all of them to resolve or reject. This way, even failed images won’t break the whole process.

Here’s a quick example of the Promise-based approach:

const images = Array.from(document.querySelectorAll('img'));
const imagePromises = images.map(img => {
  return new Promise((resolve) => {
    // Check if image is already loaded
    if (img.complete && img.naturalWidth > 0) {
      resolve();
      return;
    }
    // Listen for load and error events
    img.addEventListener('load', resolve);
    img.addEventListener('error', resolve); // Treat errors as "done"
  });
});

// Trigger page reveal once all images are processed
Promise.allSettled(imagePromises).then(() => {
  document.body.classList.remove('hidden');
});

Key Differences Recap #

• window.onload is simple but waits for all page resources, not just images.
• Manual tracking is more targeted (only waits for images) but requires handling edge cases like cached images and errors to be reliable.

If you can share the exact code of your two functions, I can give an even more tailored answer—but the above should cover the most common issues you’re facing!

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