Image Rendering Failure at Short Durations (100 ms)

[shirelch]

Hi all,
I'm running a jsPsych experiment where I present images very briefly (100 ms) using jsPsychHtmlKeyboardResponse. Occasionally, the stimuli fail to render visually, although JavaScript logs indicate successful loading and rendering timestamps.

• Images randomly fail to appear.
• It happens intermittently, not consistently related to any specific image.
• When logging timing using requestAnimationFrame and performance.now(), the logged rendering delays are very small (~1 ms), yet sometimes no image is actually displayed.

Solutions I've tried:

Preloading and explicit decoding:
I used jsPsych preload and explicitly decoded images with img.decode().

Promise.all(images.map(src => {
    const img = new Image();
    img.src = src;
    return img.decode();
})).then(() => console.log("Decoded successfully"));

Some images threw EncodingError, but successfully decoded images occasionally failed to render visually. Additionally, the erroneous images sometimes did show.

Hidden DOM pre-rendering:
I pre-rendered all images invisibly in the DOM before the experiment, but this also did not resolve the issue:

images.forEach(src => {
    const img = new Image();
    img.src = src;
    img.style.visibility = 'hidden';
    document.body.appendChild(img);
});

Has anyone faced a similar issue with intermittent image rendering failures at very short durations? How can I reliably render brief-duration image stimuli?

Thank you!

[ChristopheBossens]

How many images are you preloading? If your experimental design permits it, I would try to have a trial where I set the image in the trial on_start function, something like (just the general gist, I did not test this code):

on_start : function() {
 img.onload = () => {
  img.style.visibility = '';
  setTimeout( () => {   img.style.visibility = 'hidden';  }, 0.1);
 }
}
img.src = src

With this approach the visibility of your trial image would be set only after the confirmation that it has been loaded. Wondering if this would still lead to some images not showing.

[kurokida]

I am the developer of the Psychophysics plugin. I am somewhat skeptical about whether it is possible to present stimuli for short durations like 100 ms using jsPsychHtmlKeyboardResponse. It probably depends on the accuracy you are looking for. The results of my previous investigation might be helpful although I didn't directly check the accuracy of jsPsychHtmlKeyboardResponse.

Best regards,
Daiichiro