I have a div with two divs inside, each one with a background image. When I render, the images are not displayed, but If I try a second time (and any subsequent time) the images will be displayed. One of the two is quite large (1200x800), the other is 400x300. How can I load them before the first render?

.board-overlay {
background: url('/img/homebrew/board/overlay-faction-board.png') left top no-repeat;
width: 100%;
height: 100%;
z-index: 2;
}

.board-avatar-image{
background: url('/img/homebrew/board/avatar-1.jpg') left 25px no-repeat;
width: 489px;
height: 300px;
position: absolute;
z-index: 1;
}

I tried with a timeout:

  buttonSave.addEventListener('click', () => {
      var node = document.getElementById('capture');
      buttonSave.innerHTML = "<i class='fas fa-spinner fa-pulse mr-2'></i> Rendering...";

      setTimeout(() => {
        domtoimage.toBlob(node, {
          quality: 0.99,
          width: node.clientWidth * 2,
          height: node.clientHeight * 2,
          style: {
            transform: 'scale(2)',
            transformOrigin: 'top left'
          }
        }).then(canvas => {
          buttonSave.innerHTML = "<i class='fas fa-image mr-2'></i> Save as Image";
          var fileName = '-loyalty-card.png';
          saveAs(canvas, fileName);
        });
      }, 300);

    });

I tried this.shot_loading = true; but without significant benefits.

I also tried to use a <img> instead of background image but it doesn't get rendered