Preloading an image and then displaying it for a very short duration

Question

In an online experiment, we need to display images for 500ms, so we can't rely on pure HTML only (due to slow or instable internet connections). On the other hand, using jspsych would be too much overhead for such a simple task. So how can we hide an image and show it once it's loaded for a certain duration? Would be great if the answer includes information where to precisely put the code in Qualtrics javascript section (addOnload, addOnready, …).
BTW: in the rendered HTML of an image there's the data-attribute data-image-state="ready". What is it for?

Best answer by CamM

Hi novern, credit goes to TomG for his original solution which I've adapted to meet your specific ask.
Basically, you can add the following code to the question's addOnReady function -:
var img = jQuery("#"+this.questionId+" img");
setTimeout(function() { img.hide(); },500);
Hope that helps.
Cheers,
Cameron

CamM · Accepted Answer

Hi novern, credit goes to TomG for his original solution which I've adapted to meet your specific ask.
Basically, you can add the following code to the question's addOnReady function -:
var img = jQuery("#"+this.questionId+" img");
setTimeout(function() { img.hide(); },500);
Hope that helps.
Cheers,
Cameron

novern · Answer

Thanks CamM for adapting TomG's code to my specific needs.
I've got to specify my question further: I have to preload ~150 images that are assigned to a rating question by using a loop inside a loop & merge block; the images itself are not hosted on Qualtrics, they are hosted in an external web folder and get inserted into Qualtrics via an embedded field. My thought was, I could preload them all before the actual experiments starts. I could preload them, for example, while the participants are filling out some "static" questions that are not part of the image trials itself. I've found some code to do this on stack overflow (https://stackoverflow.com/questions/3862879/preload-an-array-of-images-with-jquery).
for(i=0; i var image_preload = new Image();
image_preload.src = imgDir+imgArray[i];
}
How do I have to adopt the code in order to make it work in Qualtrics? Will the images really be preloaded for the whole trial then?

Sign up

Login to the Community

Scanning file for viruses.

This file cannot be downloaded