Preload images | XM Community
Skip to main content

Hello!

I have come across this question multiple times on the forum, but I haven't found a definitive answer that addresses various scenarios. I am looking for a way to either preload all the images shown in a question or hide them until they are ready to be displayed. Is there anyone who can provide a solution to this issue using JavaScript? The images will be displayed as you can see in the image below. I am hosting them externally via URL and including them in the loop and merge in two fields (see second image). 

 

 

 

 

 

I still don't understand your question. If you want to upload your images in Qualtrics server, you can use graphics library option use that URL instead of external image URL. If this is your requirement then please refer below link for the same.

 

https://www.qualtrics.com/support/survey-platform/account-library/graphics-library/


Dear @ArunDubey , thank you for responding! I did not make myself clear. When a question is shown to the participants, I want both images to be shown exactly at the same time, to avoid bias in the participants. If the images ar not preloaded, it sometimes occurs that one image will be shown first, and the second image will pop up slightly later. To mitigate this I have thought of the following approaches:

  • preload the images so the page will show them at the same time
  • hide both images until they are both loaded, and display them together.

Could you maybe advice me on how I would build one of these approaches in javascript?


Refer this link and see if loading method helps you

 

https://www.w3schools.com/tags/att_img_loading.asp#:~:text=The%20loading%20attribute%20specifies%20whether,are%20positioned%20below%20the%20fold.

 

 

If above property will not work then you can try this. Hide images using CSS and can show it after 1 second.

 

E.g.

 

html:

<img src='image url' class='ABC'>

 

Add Css under question text in html view:

<style>

.ABC{dispaly:none}

</style>

 

Add JQuery under addOnload function In javascript.

 

setTimeout(function(){

jQuery('.ABC').css('display','inline');

},1000);


Leave a Reply