Preload images at the start of survey | XM Community
Skip to main content

Hello brains-trust,

 

I am designing a study that involves many images. The survey should show one image at a time for a fixed time (4 seconds) before automatically going onto the next image. What I’ve done is I’ve created one block for each image. In each block, the first question’ will just be a short line ‘Please look at this image’ and the image. The second question will be the timer set to auto-proceed after 4 seconds.

 

Problem is, if a participant has slow internet, each image may take over 1 second (or even 2 seconds) to load. This means the participant’s exposure to the image will be less than the designed 4 seconds. This is going to mess up my research.

 

One solution, my supervisor suggested, is to have all images pre-loaded at the start of the survey, so that when the participant goes through images, all images will appear instantly without the need to wait.

 

I have not found any function in Qualtrics that allows pre-loading. Even after searching on this forum, I have not found any solution that addresses my problem.

 

Can anyone teach me how to pre-load images at the first block of my survey? That would be much appreciated!

@achernarsw Instead of working with a additional timer question, use JavaScript for the addOnReady function (executed when the question was loaded and visible to the participant):

var img = jQuery("#"+this.questionId+" img");
setTimeout(function() { img.hide(); },4000);

The image is hided after 4000 ms / 4 s.

Preloading all images at the start might be more complex. I am not sure if this is actually possible. I was thinking about

  1. Creating a „dummy“ multiple choice question with all images as options at the start of the survey
  2. Hide the dummy question with JavaScript (display.none) which should still load the sources and then…
  3. Forwarding those choices to the other visible questions in hope that they will not be loaded again. But this would be something to test…

Best

Christian

@achernarsw You can use this JS function to load all your images in intro or consent page.

This will get all images in the browser cache and will hence not need to be loaded again:

 

Qualtrics.SurveyEngine.addOnload(function () {
	const quest = this;
	// Hide the Next Button
	quest.hideNextButton();
	const imgLinks = =
		"https://iima.au1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_cCQ21dgfJJU1JDT",
		"https://iima.au1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_03uFE9bjTVeXlad",
		"https://iima.au1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_9LTvOOtrgXEorQh",
		"https://iima.au1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_9z9n5amvozfILqZ",
		"https://iima.au1.qualtrics.com/ControlPanel/Graphic.php?IM=IM_0jH3QAOZh6Av7Dv"
	];

	const promises = =];
	imgLinks.forEach((url) => promises.push(fetch(url)));

	Promise.all(promises).then(() => {
		// Show the Next Button when all images are loaded
		quest.showNextButton();
	});
});

 

Here’s a demo: https://iima.au1.qualtrics.com/jfe/preview/previewId/00a1841e-33a5-49ae-a9c5-6934da853af4/SV_8HBDY4VRJnFn40J/BL_bNqiuf86esMsAE6?Q_SurveyVersionID=current

 

Forgot to add, you’ll need to replace my link with your image urls. Using the Qualtrics library will be faster.

 

Thank you both chackbusch and ahmedA. Those are brilliant methods!

 

I am trying both your pre-loading methods. Right now, it seems they both work.  chackbusch’s method seems to load slower at the intro page (I put the dummy question there), but it better ensures instant presentation afterwards. On the other hand, ahmedA’s method loads faster at the intro page, but later presentation still takes some time to load (but faster than no pre-loading codes). Not sure what made the difference.

 

However, I would need to test run the survey under a variety of conditions (different devices, different browser, different internet bandwidth), and see how things run.

 

Kudos to both of you. You are life savers!

@achernarsw if you are using my solution and still facing an higher loading times, that means that you are either loading the images too early in the survey, i.e. cache is overflowing and that’s why the images have to be loaded again or there is a rendering issue. Your images maybe too large, the machine maybe too slow or you may have too many other elements on the screen. Once the images are in the cache, the browser should load them instantly.

Hello brains-trust,

 

I am designing a study that involves many images. The survey should show one image at a time for a fixed time (4 seconds) before automatically going onto the next image. What I’ve done is I’ve created one block for each image. In each block, the first question’ will just be a short line ‘Please look at this image’ and the image. The second question will be the timer set to auto-proceed after 4 seconds.

 

Problem is, if a participant has slow internet, each image may take over 1 second (or even 2 seconds) to load. This means the participant’s exposure to the image will be less than the designed 4 seconds. This is going to mess up my research.

 

One solution, my supervisor suggested, is to have all images pre-loaded at the start of the survey, so that when the participant goes through images, all images will appear instantly without the need to wait.

 

I have not found any function in Qualtrics that allows pre-loading. Even after searching on this forum, I have not found any solution that addresses my problem.

 

Can anyone teach me how to pre-load images at the first block of my survey? That would be much appreciated!

@chackbusch & @ahmedA , thanks for the invaluable input you shared in this thread! @achernarsw, best of luck in your research. If I may ask, what will your research focus on?

Leave a Reply


Terms & Conditions