Preloading an image and then displaying it for a very short duration | XM Community
Skip to main content

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?

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

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?

Did anyone find a solution to this? Does the pre-loading work? I have the same situation

Leave a Reply


Terms & Conditions