当使用客户端函数填充 DOM 时，如何等待从 puppeteer 中的 page.evaluate 函数加载所有图像

我试图让代码执行等待所有图像加载之前木偶师截屏。当调用 initData() 函数时，我的 DOM 会被填充，该函数是在客户端 js 文件中定义的。延迟或超时是一种选择，但我确信必须有一种更有效的方法来做到这一点。

    (async (dataObj) => {
             const url = dataObj.url;
             const payload = dataObj.payload;
             const browser = await puppeteer.launch({ headless: false,devtools:false});
             const page = await browser.newPage();
             await page.goto(url,{'waitUntil': 'networkidle0'});

             await page.evaluate((payload) => {
               initData(payload);
                //initData is a client side function that populates the DOM, need to wait 
                //here till the images are loaded. 
               },payload)

             await page.setViewport({ width: 1280, height: 720 })
             await page.screenshot({ path: 'test.png' });
             await browser.close();
    })(dataObj)

提前致谢。

正如另一个答案中提到的 https://stackoverflow.com/a/51652947/8492116，图像元素有一个complete财产。您可以编写一个函数，在获取文档中的所有图像后返回 true：

function imagesHaveLoaded() { return Array.from(document.images).every((i) => i.complete); }

你可以像这样等待这个函数：

await page.waitForFunction(imagesHaveLoaded);

将两者与原始代码放在一起并添加超时，这样它就不会无限期地等待，我们得到：

function imagesHaveLoaded() {
    return Array.from(document.images).every((i) => i.complete);
}

(async (dataObj) => {
         const url = dataObj.url;
         const payload = dataObj.payload;
         const browser = await puppeteer.launch({ headless: false, devtools: false});
         const page = await browser.newPage();
         await page.goto(url, { waitUntil: 'networkidle0' });

         await page.evaluate((payload) => {
           initData(payload);
         }, payload);

         await page.waitForFunction(imagesHaveLoaded, { timeout: YOUR_DESIRED_TIMEOUT });

         await page.setViewport({ width: 1280, height: 720 })
         await page.screenshot({ path: 'test.png' });
         await browser.close();
})(dataObj)