Image preloading/smooth display

[JannisBush]

Large images and slow internet connection or server can result in a noticeable lag in all trials containing images. This is rather annoying.

---

One solution would be to preload (all) images at the start of an experiment:

Change in babeUtils:

    view: {
        preload_image: function(config) {
          if (typeof config.data !== "undefined") {
            for (let trial of config.data) {
              if (typeof trial.picture !== "undefined") {
                trial.image = new Image();
                trial.image.src = trial.picture;
              }
            }
          }
        },

And in babeUtils.createTrialDOM showStim:

                if (data.picture !== undefined) {

                    $(".babe-view-stimulus").prepend(
                        `<div class='babe-view-picture'>
                </div>`
                    );
                    $(".babe-view-picture").append(data.image);

                }

And in all views: babeUtils.view.preload_image(config);

---

Potential problems:

• Slow down at the beginning of the experiment (if the experiment includes many large images)
• Loading of unnecessary images (if the experiment does not show all images to every participants)

We could also make the preloading of the images optional, i.e. the experimenter can decide whether to use preloading or not.

---

Another unrelated problem: even with the preloading of the images, large images still somehow "jump" to the screen, which does not look nice (e.g. compare it to the canvas).
Here a solution could be to use some CSS-rules to enable a smooth image display.

[x-ji]

In our case a potentially important issue caused by slow image loading is inaccurate reaction time recording, for which preloading could indeed be helpful.

Reducing content shifting would be a nice addition:

• https://aspiringwebdev.com/stop-your-web-pages-from-jumping-around-while-images-load/
• https://www.smashingmagazine.com/2016/08/ways-to-reduce-content-shifting-on-page-load/