Image preloading with the psychophysics plugin

[kittymimo]

Hi,

I am having trouble with image preloading with the psychophysics plugin. I see the preloading bar at the beginning of the experiment and get no error, but there is a delay before the image is shown. I tried using the jsPsychImageKeyboardResponse plugin instead to understand the problem. Here are my observations.

With the psychophysics plugin, as soon as I start the trial (press 5), I see a white page and there is a delay before the image is shown. With the jsPsychImageKeyboardResponse plugin, when I start the trial (press 5), there is a delay before something happens, but there is no white page between the start page and the presentation of the image.

With both plugins, if I refresh the browser and start again, there is no delay. I also noticed that the quality of the image is better with the psychophysics plugin than with the jsPsychImageKeyboardResponse plugin.

Please note that I am running the experiment offline.

Is there anything that can be done to reduce or eliminate the delay with the psychophysics plugin?

Here is my code (I run either the lunella_js trial or the lunella_pp trial):

  	var jsPsych = initJsPsych({});
 	
  	var timeline = [];

	var preload = {
		type: jsPsychPreload,
		images: ['images/lunella.png']
	};
    
	var start = {
		type: jsPsychHtmlKeyboardResponse,
		stimulus: "Press 5",
 		choices: ['5']
	}	
	
	var lunella_js = {
		type: jsPsychImageKeyboardResponse,
		stimulus: "images/lunella.png",
		stimulus_height: 648,
 		choices: '5'
	}	
	
	var lunella_pp = {
        type: jsPsychPsychophysics,
        stimuli: [{
        	obj_type: "image",
			file: "images/lunella.png",
			image_height: 648
			}],
 		background_color: "FFFFFF",
 		choices: '5',
    }

 	var timeline = [
 		preload,
 		start,
 		lunella_js,
// 		lunella_pp
 	];

    jsPsych.run(timeline);

Thank you!

[kurokida]

@kittymimo , Apologies, I just saw this post now. Is this issue still ongoing?

[kittymimo]

No problem! Yes, it’s still ongoing. I am using lower quality images for now so that I don’t get a delay, but I’m still wondering why I can’t preload the images correctly. Thank you!

[kurokida]

Thank you for your reply. I tried running your code in my environment, though I used different image files. Both the jsPsychImageKeyboardResponse and psychophysics plugins worked perfectly fine.

In other words, I have been unable to reproduce the issue so far. If you could provide your complete set of code and assets, I will check them on my end. As one possibility, is it possible that your image files are extremely large?

Best,
Daiichiro

[kittymimo]

Hi Daiichiro,

Thanks a lot for your help! Yes, I was having small delays with my experiment so I did this test with a very large file, to try to understand the problem.

So would you say that it is normal to have small delays if our files are large? I thought preloading the files would eliminate the delays, but perhaps I misunderstood.

It’s not a big issue now, as I am using smaller files, but it would be helpful for me to better understand what preloading files means exactly.

Thank you!

Catherine

[kurokida]

Hi Catherine,

I am not an expert on this, but I believe that even if images are preloaded, higher-resolution (larger) images will naturally take more time to be rendered on the screen.

On the other hand, you mentioned that 'With both plugins, if I refresh the browser and start again, there is no delay.' I honestly find it difficult to explain why this happens, and there is a possibility that my understanding is incorrect.

For what it's worth, I tested a relatively large image (4032 x 3024 pixels, 2.68 MB) in my own environment, and it was displayed without any issues at all.

Best,
Daiichiro

[kittymimo]

Hi Daiichiro,

Thank you very much for your help with this. The test I did was with a larger image (10,000 x 10,000 pixels, 68.6 MB), so perhaps that’s why I had a delay and you did not.

Anyway, I really appreciate your explanations and I don’t want to take too much of your time, so I’ll close the discussion. My experiment works fine with smaller images, so it’s all good now! :)

Thanks again for your help,

Catherine