Preloading images

[Fariba-86]

Hi,
In my test I have images which need to be preloaded before an online experiment gets started to diminish the loading effect on real time experiment Reaction Time. I also tried adding an array of images as:
var images = ['11.png', '5.png', '43.png', '00.png', '13.png', '12.png', '3.png']
however, it is not preloading the images.
Does anybody know what the reason could be?
I appreciate your help.

The whole code is as follows:

var pre_test_instructions = {
type: 'html-keyboard-response',
stimulus: ['

This is just a practice to get familiar with the real test.

'+
'

When you see the pictures, press the space bar and name them aloud as fast as you can.

'+
'

Press the space bar to begin this part.

'
],
allow_keys: true,
post_trial_gap: 1000
}

var fixation = {
type: 'html-keyboard-response',
stimulus: '

+

',
choices: jsPsych.NO_KEYS,
trial_duration: 500
}

var practice_prime = {
type: 'html-keyboard-response',
stimulus: jsPsych.timelineVariable('prime1'),
choices: jsPsych.NO_KEYS,
trial_duration: 500
}
var practice_target = {
type: 'image-keyboard-response',
stimulus: jsPsych.timelineVariable('target1'),
choices: ['space'],
trial_duration: 3000,
data: {
stimulus_type: jsPsych.timelineVariable('condition1')
},
post_trial_gap: 1500
}

var practice = {
timeline: [fixation, practice_prime, practice_target],
timeline_variables: [
{prime1: 'door', target1: 'img/11.png', condition1: 'sem'},
{prime1: 'sheep', target1: 'img/5.png', condition1: 'sem'}
]
}

var test_instructions = {
type: 'html-keyboard-response',
stimulus: ['

When you see the pictures, press the space bar and name them aloud as fast as you can.

'+
'

Press the space bar to begin the real test.

'
],
allow_keys: true,
post_trial_gap: 1000
}

var prime = {
type: 'html-keyboard-response',
stimulus: jsPsych.timelineVariable('prime'),
choices: jsPsych.NO_KEYS,
trial_duration: 500
}

var target = {
type: 'image-keyboard-response',
stimulus: jsPsych.timelineVariable('target'),
choices: ['space'],
trial_duration: 3000,
data: {
stimulus_type: jsPsych.timelineVariable('condition'),
},
post_trial_gap: 1500
}

var test = {
timeline: [fixation, prime, target],
timeline_variables: [
{prime: 'cat', target: 'img/43.png', condition: 'sem'},
{prime: 'hot', target: 'img/00.png', condition: 'ass'},
{prime: 'hat', target: 'img/13.png', condition: 'sem'},
{prime: 'apple', target: 'img/12.png', condition: 'sem'},
{prime: 'book', target: 'img/3.png', condition: 'ass'}
]
}

var images = ['11.png', '5.png', '43.png', '00.png', '13.png', '12.png', '3.png']

jsPsych.init({
    timeline: [pre_test_instructions, practice, test_instructions, test],
    preload_images: images
})

[becky-gilbert]

Hi @Fariba-86! In your timeline_variables array, it looks like your image file names are prefixed with img/. So if your images are all stored inside of a subfolder called "img", then you just need to include that in the file paths in the images array that you're using for preloading:

var images = ['img/11.png', 'img/5.png', 'img/43.png', 'img/00.png', 'img/13.png', 'img/12.png', 'img/3.png']

Does that fix the problem?

[Fariba-86]

Dear @becky-gilbert. Thanks a million times. It did the trick.