Keeping tack of the availability of graphical assets - Chromium

Question

Ok fellas, so we employ a multi-phase technique for pre-fatching of images through dynamic JavaScript and for checking of progress:

1. we declare an IMG object
2. assign onload handler to it.
3. assign a source to it through its SRC argument.
4. check the 'complete' flag to see if image already available from cache (in which case onload() would never fire)

The thing is... sometimes.... it would not work and nobody knows why.

The image might be in cache.. but the 'complete' flag would not be set; or - chromium would simply refuse to issue a GET request... nobody knows why. And then all of the sudden if I wipe the.network event pane in google dev tools then MAYBE the image would be fetched...

sample code:

this.mImageURLs[i].lastTry = now;
  let item = new Image();
  item.onload = this.assetLoaded.bind(this, this.mImageURLs[i]);
  item.src = this.wrapURIAroundDataSource(this.mImageURLs[i].data);

  if (item.complete && ((item.width + item.height) > 0)) {
    this.assetLoaded(this.mImageURLs[i]);
  }

It really is a pain the ass that Chromium 'misbehaves', every now and then.

It is NOT like it suffices to schedule download of 100 objects and that these would be attempted (at least!) to be fetched no matter what - it is not the case and we are 100% positive of that.

One has to employ a variety of fancy techniques including resumptions of attempts, sliding windows to minimize the number of requests etc to maximize the likelihood that all the assets make their way WHEN we want them to be, before proceeding anu further with our logic and we won't proceed unless we've verified that assets have been fetched.

And even then, it is really difficult to keep track of things just like described in this very thread.

Of course, we've tripple checked if there's no issue on the server side, we monitor things with Wireshark.. GET requests are not being issued and the 'complete' flag is not set.

And every now and then everything works just as expected. And other times chromium decides to fire the GET requests 60+ seconds after these were requested even though there is no heavy load on its engine..multiple times for the same asset over a couple of Http 1.1 data streams....

ideas?

Answer 1

When looking at the documentation for the complete flag on MDN, it says this.

It's worth noting that due to the image potentially being received asynchronously, the value of complete may change while your script is running.

While I have not used the complete flag for exactly what you're trying to accomplish, I have made extensive use of onLoad for images and testing to see if they have already been loaded.

What appears to be happening is that you're setting the item.src attribute, which kicks off the image loading process (where Chromium will determine if it's in cache, needs to be refreshed from the server, or a new never before seen asset and react accordingly). That loading process is asynchronous and may or may not set .complete immediately.

I believe you want to set your onload function to query the .complete bit and do the additional check for height and width. This will eliminate the race condition that you're currently seeing by checking .complete immediately after setting .src .