[Question] Wait for image to be loaded

[Pooort]

Hi.

I need to wait for a heavy image (6Mb) to be loaded.

I use:

await page.waitForResponse(src);

as suggested in #4782

But it doesn't work. Event fired at the start of loading. I see how it continue loading after this.

Thank you for help and for excellent product.

[pavelfeldman]

You should do:

const response = await page.waitForResponse(src);
await response.finished();

[Pooort]

Unfortunately it doesn't work either. It waits endlessly.

[pavelfeldman]

Could you provide a snippet with the reproduction?

[Sapkotaanish]

waitUntil: 'networkidle'

This may work.

[Pooort]

Could you provide a snippet with the reproduction?

const response = await page.waitForResponse(src); // I've got response
await response.finished(); // but this part continue endlessly
console.log('loaded'); // this one never happened

[Pooort]

waitUntil: 'networkidle'

This may work.

Unfortunately it doesn't work either. It waits endlessly.

[Pooort]

@pavelfeldman I'll try to make a test case with public image.

[dgozman]

@Pooort Any luck with a public repro case?

[dgozman]

Closing this one as we are unable to reproduce. Please comment here if you have a public repro case and we'll reopen.

[luixo]

That doesn't seem to be working, actually.

const image = ... // image locator
const imageSrc = await image.getAttribute("src");
if (imageSrc) {
  const imageResponse = await page.waitForResponse(imageSrc);
  await imageResponse.finished();
  const imagesTuples = await page.evaluate(async () => {
    const selectors = Array.from(document.querySelectorAll("img"));
    return selectors.map((img) => [img.src, img.complete]);
  });
  console.log("Images", imagesTuples);
}

As a result I get

Images [ [ 'https://picsum.photos/id/1/320/240', false ] ]

Do you need a reproduction of that?

[DoomyTheFroomy]

That doesn't seem to be working, actually.

const image = ... // image locator
const imageSrc = await image.getAttribute("src");
if (imageSrc) {
  const imageResponse = await page.waitForResponse(imageSrc);
  await imageResponse.finished();
  const imagesTuples = await page.evaluate(async () => {
    const selectors = Array.from(document.querySelectorAll("img"));
    return selectors.map((img) => [img.src, img.complete]);
  });
  console.log("Images", imagesTuples);
}

As a result I get

Images [ [ 'https://picsum.photos/id/1/320/240', false ] ]

Do you need a reproduction of that?

I think you will have a race condition here. To use waitForResponse you will have to declare this before opening the page, otherwise it may have been already loaded. You may have to (re)load the page again after you got all your image sources

[luixo]

To use waitForResponse you will have to declare this before opening the page, otherwise it may have been already loaded.

I believe you assume whenever I get to my console.log the image is already loaded, right?
But why do I get img.complete as false in that case? Shouldn't it be true as image is already loaded?