jsPsych 6.3 image preloading errors on Pavlovia

[iholzleitner]

Hi there

I keep getting preloading errors and I can't figure out why!

I have quite a few stimuli, so I'm preloading them in four batches of 378 images (each is about ~31 KB). The paths look correct; sometimes all blocks will load and run correctly, but often they won't! What am I doing wrong?

[iholzleitner]

Is there some limit as to how many images can be preloaded at once? I've noticed that after clearing the cache, it will reliably fall over. Once I've refreshed the page/started the experiment a couple of times, however, all is well—presumably because every time I run it, more and more of the images have been cached?

My ugly workaround for now is to preload the same images five times at the very start of the experiment with the preload property "continue_after_error" set as true — that appears to do the trick (but does not make me very happy :))

[becky-gilbert]

Hi @iholzleitner, do you have a live version of this task that you could share with me? That might help me figure out the problem.

There's no set limit to the number of images that can be preloaded. However different browsers/computers will have different cache limits, so you could be running into that problem. But the specific error that you're seeing ("File did not begin loading") makes me wonder if there's something else going on here. If this is a cache limit issue, then I'm wondering if we can at least improve the error messages, because the message you're getting suggests either a file name error or a CORS problem, and it sounds like neither of those explanations are correct.

In the meantime, another workaround might be to preload your files in smaller batches/blocks throughout your experiment, i.e. preload batch 1 stimuli, run a block of trials using batch 1 stimuli, preload batch 2, etc. This would be the solution I would suggest anyway if this does turn out to be a cache limit issue. Please let me know if you have questions or need help setting up this solution.

[becky-gilbert]

Oops, sorry! I just noticed that you're already preloading in batches:

I'm preloading them in four batches of 378 images

In that case all I can suggest is to break things up into even smaller batches. Otherwise if you can share a link then I'd be happy to try to figure out what's going on.

[iholzleitner]

Hi @becky-gilbert, that'd be grand if you could have a look! I made a slimmed-down test version to make it less painful to click through it :) It's private since I'm using a publicly available image set and don't want to get into trouble for "sharing" it, but I've added you as a contributor (or at least I hope I got the right Becky :))—https://gitlab.pavlovia.org/iris.jh/preloading-error. For me, it throws an error as soon as it gets to preloading the stimuli for the second block!

[becky-gilbert]

Hi @iholzleitner, thanks for giving me access to your experiment, and for slimming it down for easier testing 👍 (It's very cool, btw!)

I was able to replicate the problem. I do think you're hitting some kind of limit on either the browser's cache size or the number of simultaneous requests that can be started/pending. And while there may not be a hard numeric limit on these things, I'm guessing what's happening is that, as you increase the amount of data stored in the cache and/or number of requests, there's an increased likelihood that the browser misses one of the requests or decides it can't handle it, which is why you're getting errors about requests that aren't being initiated. I think this is also why the failures don't occur every time or with the same files. (Sorry for the vague hypothesis about this - I'm at the limits of my knowledge on this stuff and I'm not certain about how to test it...)

One clue to all of this is that the failures are less common during the first block. You also have slightly fewer image requests in the first block.

console.log(images);

Also, after the images have been successfully downloaded once, your browser will be able to load them from cache when you reload the page, which makes the loading failures much less likely. Obviously if your browser is loading from cache, this doesn't help you understand what your participants will experience when they first load your experiment. I tried disabling my browser's cache to prevent this from happening, and found that I did get an image loading failure during the first block. This suggests to me that the reason you're seeing the failures start in the second block is because the first set of images is more likely to load (because there are fewer, I think?) and once they've loaded once, they can load again from cache. You can test this yourself by disabling the cache in your dev tools network tab (tick box to disable):

And then when you see each image loading in your network tab, you should find that you don't see any loading from cache, which looks like this:

If you try loading your experiment lots of times with the cache disabled, you may find that you start to get errors in the first block as well.

Anyway, my suggestion is to break one of your existing preloading chunks into two, so that your images array will contain these 5 arrays:

• 336 images (1st chunk, part 1)
• 336 images (1st chunk, part 2)
• 693 images
• etc.

then disable your cache, and try running through your experiment lots of times. If you're able to load the two smaller chunks consistently, then I think it's safe to conclude that the problem is due to the size of the chunks. You could also try changing the chunk that's broken into 2, just to be sure.

I hope this helps. If you try this, could you please let us know how it goes?

[iholzleitner]

Hi @becky-gilbert, I really appreciate you taking the time to look into this!

As you suggested, I split the first chunks into two smaller ones, cleared my cache and disabled caching in the network tab. The first time I run the experiment, everything appears to work fine until it gets to the third (i.e. the first larger block), which suggests it's indeed the size of chunks that's causing the issues. However, and very randomly, every third time I refresh, it falls over immediately at the first block!?

I've attached a screenshot of the network tab from one of the live experiments where I've taken to preloading the same images multiple times right at the start of the experiment (I've decided if it crashes, I'd rather it do so straight away, for our poor participants' sake 😅). So far that appears to work. I'm preloading five times (I really did get desperate), but it looks like images that fail to preload on the first try usually are fine in the second round:

[becky-gilbert]

However, and very randomly, every third time I refresh, it falls over immediately at the first block!?

Weird! Is your experiment still set up to run this way, and if so, do you mind if see if this happens to me too?

Thanks for the info from your other experiment. This is really interesting, and I confess I don't fully understand what's going on. But since it sounds like you've had success with multiple preload attempts with the same set of files, one thing you could try is to re-try the preloading but only for the files that failed. I believe that the file name(s) that fail to load are stored in the trial data. This means you could start with your normal preload trial, then have a conditional node that checks whether there were any loading failures, and if so, runs another preload trial just for the failed file(s). Then you could put this conditional node in a loop node so that it continues again up to e.g. 5 times, then gives up if there are still files that won't load. I think this would probably work the same way as what you're doing now, just a bit faster and more efficient. Based on seeing your code I'm guessing you'll know how to set this up, but let me know if not and I'd be happy to help.