How to force load an image which is not loading in HTML5 canvas?

Question

let head = new Image();
head.src = "img/head.png";

if(!head.complete)
    console.log('NOT');

In the code above I am getting NOT in my log for the first time the page loads and then when I refresh the page nothing is logged as the image loads. How to force load the image in first page load?

I have referred to many answers on SO but nothing has helped till now. I used onload but the image is just not loading on the first load as I checked it using head.complete . I even added a timestamp at the end of the image "head.png?"+getTime(new Date()) if there was a problem regarding caching.. But no luck!

And all other images are loading perfectly.

Answer 1

Im assuming that your script is running directly in the top level function document.ready(), or your script is inside a function that is running inside the first one. then you may check one of this one:

The image is considered completely loaded if any of the following are true:

Neither the src nor the srcset attribute is specified. The srcset attribute is absent and the src attribute, while specified, is the empty string (""). The image resource has been fully fetched and has been queued for rendering/compositing. The image element has previously determined that the image is fully available and ready for use. The image is "broken;" that is, the image failed to load due to an error or because image loading is disabled. It's worth noting that due to the image potentially being received asynchronously, the value of complete may change while your script is running.

Also Im assuming that you appended the head variable to the or body element. You can check to in the browser console if the link to the image is ok (if you step over the link, it will show the image)