Puppeteer：修改innerHTML后如何等待图片加载再截图？

Hey there! I’ve dealt with this exact problem before in Puppeteer—relying on fixed timeouts like waitFor(2000) is super flaky (what if the image takes longer to load on a slow connection?), and waitFor("#logo_website") only waits for the element to exist in the DOM, not for the image itself to finish loading. Let’s fix this properly.

Why Your Current Approach Fails #

When you insert the image via innerHTML, the <img> tag gets added to the DOM right away (so waitFor("#logo_website") resolves immediately), but the browser is still fetching the image file in the background. That’s why your fixed delay works sometimes, but isn’t reliable long-term.

Solution 1: Wait for Image Load State with waitForFunction #

The most reliable way is to check that the image has completed loading and isn’t a broken/placeholder. Use page.waitForFunction to verify two key properties:

• img.complete: Confirms the image has finished loading (success or failure)
• img.naturalWidth > 0: Ensures the image actually loaded valid content (avoids broken images that return a 404 but still trigger complete)

Here’s the code:

element.innerHTML = "<img id=\"logo_website\" src=\"http://random.com/logo.jpg\">";
await page.waitForFunction(() => {
  const img = document.getElementById('logo_website');
  return img && img.complete && img.naturalWidth > 0;
}, { timeout: 5000 }); // Add a timeout to avoid hanging if the image fails to load

Solution 2: Listen to the Image’s load Event Directly #

If you want more control, you can create the image element in the browser context and wait for its load event before inserting it. This guarantees you only proceed once the image is fully loaded:

await page.evaluate(() => {
  return new Promise((resolve, reject) => {
    const img = document.createElement('img');
    img.id = 'logo_website';
    img.src = 'http://random.com/logo.jpg';

    // Resolve when the image loads successfully
    img.onload = () => {
      // Insert the image into your target element (replace with your actual selector)
      document.querySelector('#your-target-container').appendChild(img);
      resolve();
    };

    // Handle errors to avoid infinite waiting (adjust based on your needs)
    img.onerror = () => {
      console.error('Failed to load logo image');
      reject(new Error('Image load failed'));
    };
  });
});

Bonus: Handle Edge Cases #

• Timeout: Always add a timeout to your wait functions (like the 5000 ms in Solution 1) to prevent your script from hanging indefinitely if the image fails to load.
• Multiple Images: If you’re loading several dynamic images, extend Solution 1 to check all of them—select a group (e.g., document.querySelectorAll('.dynamic-image')) and verify each one’s state.

That should do it! No more flaky fixed delays—your script will now wait exactly until the image is ready before taking the screenshot.

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