Pre-load Images as background images in angular

Question

In url_rec i am getting url of images. I want to pre-load images as background-image on browser before displaying it. We are fetching images which are currently being processed. So whenever i want to display any image it won't take any delay, and my work don't get slower. I am working on angular 5 and this code is written in .ts file.

this.socket.on('url_json', function(url_rec)
    {
      // console.log(url_rec);
    });

Html5 canvas to display backgrond image.

<canvas #myCanvas width="2048" height="2048" [ngStyle]="{ 'background-image': 'url(' + url + ')','background-repeat':'no-repeat'}">
</canvas>