Preload images at the start of survey

@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.

@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?