Tengo un div con dos div dentro, cada uno con una imagen de fondo. Cuando renderizo, las imágenes no se muestran, pero si lo intento por segunda vez (y en cualquier momento posterior), las imágenes se mostrarán. Uno de los dos es bastante grande (1200x800), el otro es de 400x300. ¿Cómo puedo cargarlos antes del primer 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; }

Intenté con un tiempo de espera:

 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); });

this.shot_loading = true; pero sin beneficios significativos.

También traté de usar un <img> en lugar de una imagen de fondo, pero no se muestra.