-1
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.

FunnelScr
  • 161
  • 1
  • 12
  • Possible duplicate of [Image drawn to HTML5 Canvas does not display correctly on first load](https://stackoverflow.com/questions/8346418/image-drawn-to-html5-canvas-does-not-display-correctly-on-first-load) – Alon Eitan Nov 13 '19 at 17:17
  • I have edited my question Have a look – FunnelScr Nov 13 '19 at 17:19
  • I appreciate the edit, but we need to see a complete example of how you've used `onload`. It is overwhelmingly likely that`onload` is the solution, so there was probably a problem in how you used it. An answer that solves your problem will likely identify the mistake in your `onload` approach, but no such answer can currently be provided until you show the code of your current `onload` approach. – apsillers Nov 13 '19 at 17:20
  • @apsillers The thing is that I am loading the image in the beginning and then a function calls a draw() function sometime later at a specific time and I guess `onload` won't help there – FunnelScr Nov 13 '19 at 17:25
  • @KobayakiTunnel Then you need to have `onload` and `run` coordinate with one another, so that draw happens when both (1) it is time for `run` and (2) `onload` has already been called. Obviously, if `run` tries to perform the draw before `onload` runs, it will never work: the image data hasn't arrived from the network yet and you can't draw data you don't have yet! Again, show the actual code, and you might get a solution to your actual problem. `:)` – apsillers Nov 13 '19 at 17:30
  • 2
    At least you set the properties `w` and `h` immediately after making the image object without waiting for the image to load. – radulfr Nov 13 '19 at 17:42
  • @radulfr OMG Thanks a ton!!! – FunnelScr Nov 13 '19 at 17:43

1 Answers1

0

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)

ManKino
  • 47
  • 4