Delay in the presentation of images

[lily2brain]

Good night guys, I'm having a problem. When running the script in Cognition, I'm having 2s delays for the presentation of the images by the google chrome browser, I put a preview of my script for you to understand with only 4 images, but in total, there are 116 images to be presented, I don't believe it that this error is due to the quantity. I look forward to a possible help, thank you!

var timeline = [];
   
    timeline.push({
    type: 'fullscreen',
    fullscreen_mode: true
    });

    timeline.push({
    type: 'html-keyboard-response',
    stimulus: "<div style=font-size:25px;><p>Esta pesquisa está configurada para ser exibida em tela cheia, por favor, não saia desse modo.</div>"+
	          "<div style=font-size:25px;><p>Pressione <strong>ESPAÇO</strong> no teclado para continuar.</div>"
    });
   
   	var welcome = {
		type: "html-keyboard-response",
		stimulus:"<p><strong><h1>Bem-vindo(a) ao experimento</h1></strong></p></br>",
		choices: jsPsych.NO_KEYS,
		trial_duration: 2000,
	};
	timeline.push(welcome);

   var fixation = {
		type: 'html-keyboard-response',
		stimulus: ['<p style="font-size: 90px;font-weight: bold; color: black">+</p>'],
		choices: jsPsych.NO_KEYS,
		trial_duration: 1000,
		css_classes: ['fixation']
	};
	
    var preload_images = {
    type: 'preload_images',
    auto_preload: true,
    };

	var test_stimuli = [
	  {stimulus: 'image1.jpg', prompt:"<div style=font-size:30px;><p>Qual face expressa com mais intensidade?</div>", data: {correct_response: '0', vi1: "m", vi2: "a", vi3: "e", vi4: "teste"}},
	  {stimulus: 'image2.jpg', prompt:"<div style=font-size:30px;><p>Qual face expressa  com mais intensidade?</div>", data: {correct_response: '1', vi1: "f", vi2: "n", vi3: "d", vi4: "teste"}}, 
	  {stimulus: 'image3.jpg', prompt:"<div style=font-size:30px;><p>Qual face expressa com mais intensidade?</div>", data: {correct_response: '1', vi1: "m", vi2: "r", vi3: "", vi4: "teste"}},
	  {stimulus: 'image4.jpg', prompt:"<div style=font-size:30px;><p>Qual face expressa com mais intensidade?</div>", data: {correct_response: '0', vi1: "f", vi2: "t", vi3: "e", vi4: "teste"}}, 
	];

   var question = {
      type: 'html-keyboard-response',
      stimulus: jsPsych.timelineVariable('prompt'),
      choices: jsPsych.NO_KEYS,
      trial_duration: 2000
    };
	
   var test_target = {
      type: "image-button-response", 
      stimulus: jsPsych.timelineVariable('stimulus'),
      stimulus_width: 950,
      choices: ["<div style=font-size:15px;><p><strong>ESQUERDA</strong></div>", "<div style=font-size:15px;><p><strong>DIREITA</strong></div>"],
      margin_horizontal: '250px',
  
  data: jsPsych.timelineVariable('data'),
  on_finish: function(data){
    data.correct = data.response == data.correct_response;
  }
  };
	
  var blocktrial_procedure = {
      timeline: [fixation, question, test_target],  
      timeline_variables: test_stimuli, 
      randomize_order: true
  };
  timeline.push(blocktrial_procedure);

	var end_test = {
		type: 'html-keyboard-response',
		stimulus: "<div style=font-size:30px;><p>Fim da Prática.</div>"+ 
				  "<div style=font-size:20px;><p>Pressione <strong>ESPAÇO</strong> para continuar.</div>",
		choices: [' '],
	};

	timeline.push(end_test);

    timeline.push({
    type: 'fullscreen',
    fullscreen_mode: false
    });

    timeline.push({
    type: 'html-keyboard-response',
    stimulus: "<div style=font-size:40px;><p>Fim da exibição em tela cheia.</div>"+
			  "<div style=font-size:20px;><p>Feche a aba do navegador.</div>",
    });
	

	jsPsych.init({
    timeline: timeline, 
	use_webimage: false,
    on_finish: function() {
      jsPsych.data.displayData();
    }
  });

[jodeleeuw]

When you use timeline variables, the auto_preload option won't work. You'll need to manually preload the image files.

[lily2brain]

Hi @jodeleeuw, thanks for the suggestion, I managed to solve the stimulus delay problem. :)

[kurokida]

I faced the same problem and found this answer. It would be very helpful if this is clearly stated on the preload help page.