Image.onload未执行全部代码求助：多图加载嵌套回调逻辑异常

Hey there! Let's dig into why your image onload handlers aren't firing as expected. The core issue with your current code is that you're nesting onload callbacks—this creates a fragile chain that breaks easily if any image fails to load, or even if an image loads from cache before you’ve set up the next handler.

What's Wrong With the Nested Approach? #

• Fragile Dependency Chain: Each image's onload handler is only set up after the previous one completes. If one image fails to load (e.g., a broken URL, network error), all subsequent handlers never get attached, so their code never runs.
• Cache Gotchas: If an image is already in the browser cache, its onload might fire immediately when you set src—while nesting might sometimes work here, it's inconsistent and risky.
• No Error Handling: There's no way to catch when an image fails to load, so you'll never know why your code stops halfway.

A Robust Solution Using Promises #

Instead of nesting, we can use Promises to handle each image's loading independently, then wait for all of them to finish before running your logic. This is cleaner, more maintainable, and handles errors properly.

Here's how to rewrite your code:

$(window).on('load', function() {
  // Helper function to load an image and return a Promise
  function loadImage(src) {
    return new Promise((resolve, reject) => {
      const img = new Image();
      // Handle successful load
      img.onload = () => resolve(img);
      // Handle load failures
      img.onerror = () => reject(new Error(`Couldn't load image: ${src}`));
      // Set src LAST to ensure handlers are attached first
      img.src = src;
    });
  }

  // Define all your image URLs here
  const imageSources = {
    art: '/path/to/your/art-image.jpg',
    top: '/path/to/your/top-image.jpg',
    bottom: '/path/to/your/bottom-image.jpg',
    left: '/path/to/your/left-image.jpg',
    right: '/path/to/your/right-image.jpg'
  };

  // Load all images at once
  Promise.all([
    loadImage(imageSources.art),
    loadImage(imageSources.top),
    loadImage(imageSources.bottom),
    loadImage(imageSources.left),
    loadImage(imageSources.right)
  ])
  .then(([artImg, topImg, bottomImg, leftImg, rightImg]) => {
    // All images loaded successfully! Run your logic here
    console.log("1");
    console.log("2");
    // ... rest of your processing code goes here
    // You can use the loaded image objects (artImg, topImg, etc.) directly
  })
  .catch(error => {
    // Handle any image loading failure
    console.error("Image loading failed:", error);
  });
});

Why This Works Better #

• No Nested Hell: All image loads are initiated in parallel, so you don't have to wait for one to finish before starting the next.
• Error Handling: The .catch() block lets you catch and debug any failed image loads instead of silently failing.
• Cache-Safe: By setting src after attaching onload and onerror, you ensure even cached images trigger the correct handlers.
• Clear Logic: Once all images are loaded, you get access to all the loaded image objects in one place, making your processing code easier to write and read.

If you need to allow some images to fail while still processing the ones that loaded, you can use Promise.allSettled() instead of Promise.all()—it will return results for every image, whether it succeeded or failed.

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