Cache limit

[VL914]

Hello,
I'm now preloading images via an external JSON file as suggested here #1168 . Would this method cause the problem of cache limits if I'm preloading more than 20,000 images at once (though the average sizes of the images are pretty small)? Does it mean that I'm preloading all the images at the beginning of the experiment, or is it just preloading a list and retrieve one image at a time during the experiment? Because I'm getting feedback from the participants saying that there were trials where the images didn't show up (the presentation time is 1500 ms). If this is the problem, is there any way that I could solve it? Thank you very much!

[jodeleeuw]

Hi @VL914 ,

Does it mean that I'm preloading all the images at the beginning of the experiment, or is it just preloading a list and retrieve one image at a time during the experiment?

The preloading method attempts to download all of the images needed in the experiment prior to starting the experiment. So it'll be downloading all 20,000 images in this case. The goal is to get the browser to cache these files so that during the experiment the files are loaded from memory and not the server.

Would this method cause the problem of cache limits if I'm preloading more than 20,000 images at once (though the average sizes of the images are pretty small)?

20,000 images is a lot. Unfortunately web pages don't have a whole lot of control over the browser's cache of preloaded content. jsPsych can make a request to preload 20,000 images, but at some point the browser will probably conclude that it doesn't really need to save all 20,000 images. I haven't found good information about how browsers decide what to cache and what to ignore, so I don't know what the exact limits are for any particular browser. And the limits are customizable by the user, so while default information might be informative it wouldn't be a guarantee of success.

If this is the problem, is there any way that I could solve it?

#724 talks about ways to preload images in smaller batches.

Are you showing each of the 20,000 images to participants? Another option would be to only preload the images needed for a particular subject.

[VL914]

Hello @jodeleeuw, thanks much for your prompt reply! I guess I need to figure out some other way to preload the images. The link of preloading in smaller batches doesn't seem to work for me, could you post the link again?

[jodeleeuw]

I've fixed the link. Sorry about that!

[VL914]

Thanks for fixing the link! I'm still a little bit confused about the preloaded js file. If I attach the js file in the 'head' section like this
<script src="resources/imgDic.js" type="text/javascript"></script>
But within this file, I have 2 variables:
var imgDic - contains the full image set (20,000+)
var imgDicFormal - contains only 1000+ images randomly chosen from imgDic for each participant

If I only directly call imgDicFormal as my timeline variable, and never use imgDic anywhere in my HTML file, does it mean that I'm only preloading the subset imgDicFormal or I'm still preloading both of the full set and subset of images?

Sorry that this question may seem dumb. I'm not very familiar with the js before using jsPsych. I think I just don't quite understand if attaching a js file which has a json format variable equals preloading the images linked to the variable (or is it just preloading some text format variables?), even though I'm not calling it as a timeline variable.

[jodeleeuw]

Loading the script does not result in preloading the images. To preload the images you'll need to pass an array of file paths to the preload_images parameter of jsPsych.init(). Like this:

var all_images = [ ... ]

jsPsych.init({
	timeline: timeline,
	preload_images: all_images
});

jsPsych will auto-preload images in some cases, but it currently does not auto-preload files that are only referenced in timeline variables.

[VL914]

Thanks much for your explanation! I now have a better understanding of how preloading works! I'm using the method you suggested above to incorporate all image sources in a json file, but preload a subset of them when initializing. It works pretty well so far!