puppeteer修改div的background-image后，如何等待图片加载完成后截图？

Question

目前做法是：

const imgSrc = 'https://test.cn/a.jpg'
await page.$eval('#background', (el, value) => {
  el.style.backgroundImage = value ? `url(${value})` : ''
}, imgSrc)
await page.waitForResponse(response => response.url() === imgSrc)
await setTimeout(500) // 已用promise封装，等待500毫秒

以上做法看起来有效，如果图片比较大，500毫秒内下载不完，截的图就只有一半，如下左半部

---

问题解决啦，感谢 @阿蛇

---

使用 @阿蛇 的方法，以下两个设置不能关闭：

page.setJavaScriptEnabled(false)
page.setCacheEnabled(false)

我手贱把这两个都设为false了，调试了我一整天...

Answer 1

const imgSrc = 'https://test.cn/a.jpg'
await page.$eval('#background', (el, value) => {
    return Promise(resolve =>{
        const img = new Image();
        img.onload = function(){
            el.style.backgroundImage = value ? `url(${value})` : ''
            resolve()
        }
        img.src = value;
    })
}, imgSrc)