Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p>You can set a flag on the image object when it loads and test that flag later:</p> <pre><code>var fname = getImgFnameFromDate(datetime); var imgAdd = new Image(); imgAdd.onload = function() { this.myLoadFlag = true; } imgAdd.src = fname; imgStore.push(imgAdd); </code></pre> <p>Then elsewhere, you can check to see if the image has been loaded yet:</p> <pre><code>if (imgStore[imgIndex].myLoadFlag) { // image has been loaded } </code></pre> <p>When using an onload handler, just make sure that you set it before you set the <code>.src</code> property otherwise, there are some cases in some browsers where you will miss the onload event if the image is already in the browser cache.</p> <hr> <p>An alternate approach (perhaps simpler to use) would be to have a second array that only contains loaded images and your main code only uses that:</p> <pre><code>// place we first put images, they go into imgStore only when actually loaded var imgPending = []; var fname = getImgFnameFromDate(datetime); var imgAdd = new Image(); imgAdd.onload = function() { imgStore.push(imgAdd); // now that it's loaded, add it to the images we're using } imgAdd.src = fname; imgPending.push(imgAdd); </code></pre> <p>Then, your code that uses <code>imgStore</code> will only ever see images that are actually loaded. One downside to this is that images go into <code>imgStore</code> in load order, not necessarily in the order that you request them so the order this way could be different than your old way.</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload