I'm currently building a survey where several images appear on a page, and respondents answer the location of an image using their keyboard. I have a page timer to measure how long they spend on the page, and precise timing is the most important part. Qualtrics has informed me that regardless of if the images are fully loaded, the page timer begins as soon as they enter the page.



I've heard of preloading images onto the page (a text entry question), and I found some code that supposedly does this. However, it still seems like some images, at times, load marginally faster. I'm also not sure how accurate the timer is. This is the code i'm currently working with:





Qualtrics.SurveyEngine.addOnload(function() {



//Code for key pressing

var qid = this.questionId;



document.onkeydown = function(event) {

console.log('keydown',event);

if (event.which == 69) {

event.preventDefault();

Qualtrics.SurveyEngine.setEmbeddedData('resp_one','0');

jQuery('#NextButton').click();

} else if (event.which == 73) {

event.preventDefault();

Qualtrics.SurveyEngine.setEmbeddedData('resp_one','1');

jQuery('#NextButton').click();

}

}



// FUNCTION 1 - IMAGE LOADER

function loadImages (image_srcs) {

var src, _i, _len;



//If no images specified, skip this step

if( image_srcs.length == 0) {return imagesLoaded();}



images = [];

loadedImages = 0;



for (_i = 0, _len = image_srcs.length; _i < _len; _i++) {

src = image_srcs[_i];

images.push(new Image);



images[images.length - 1].src = src;



images[images.length - 1].onerror = function() {

alert("Your web browser encountered an issue running this portion of the study. You will be skipped ahead. You may have to click through this message several times.");

if (document.getElementById('NextButton')) document.getElementById('NextButton').click();

};



images[images.length - 1].onload = function() {

loadedImages++;

if (loadedImages = images.length) return imagesLoaded();

};



}

return images;

};





// FUNCTION 2 - IMAGES LOADED

function imagesLoaded() {

document.getElementById('loading').style.display = 'none';

document.getElementById('instructions').style.display = 'block';

return document.addEventListener('keyup', keyCheckForcedError, false);

};



//IMAGE URLS

image_srcs = [

"image 1",

"image 2",

"image 3",

];



images = loadImages(image_srcs);



});



Has anyone ever done something similar to this or knows how to ensure the images are preloaded on the page before it displays/the timer starts? Any suggestions are much appreciated!