loading lots of images

[Adrian Oesch]

hi josh,

two things came up, working on a new experiment.

1. i’m trying to preload about 640 images, which are about 170mb big in total. the preloading takes a while, but eventually finishes and seems to be ok. but when running the experiment, the pictures seem be quite slow. i don’t think it’s due to the execution of my code, because i display values on top of the images and those values are usually displayed faster. is it just too much data for a browser to handle or am i doing something wrong? i could also try to first load the images in a hidden element and then display them at once, but not sure this would really makes things faster. what do you think? 

here’s the experiment: http://timgroup-coglab.rhcloud.com/anna.html?i=test_jspsych&c=3024156&a=1110000&m=1&ch=3&r=R_1HerF4PvmMZHTUS&s=4

and here’s the code where i preload the images: https://github.com/adrianoesch/timgroup-anna/blob/master/anna.html#L126

and the plugin code where they get displayed: https://github.com/adrianoesch/timgroup-anna/blob/master/plugins/jspsych-anna.js#L170 

2. i ran into a weird problem the other day. i was trying to shuffle, and repeat an array of objects, but then assign a trial index with a loop so i can easily update the customized progressbar. whatever i’ve tried, the assigned trial index was out of order. my work around was to use your current chunk id function and transform that until i got what i wanted, but i’m wondering where this strange behaviour comes from. i wrote a small script to highlight this (check the console): 

http://timgroup-coglab.rhcloud.com/shuffletest.html

plust the code: https://github.com/adrianoesch/timgroup-anna/blob/master/shuffletest.html

nothing urgent, appreciating any comments.

cheers.

adrian.

[Josh de Leeuw]

I'm not sure how to handle the preloading problems, but it's definitely something that is worth investigating since this is not an unusual thing to do. I would suggest trying to find whatever generic solutions are out there on stackoverflow etc... for preloading hundreds of images. If you find something that works please let me know so I can work on improving jsPsych's built in preloading.

The second issue I believe is a bug with repeat. I think what is happening is that the repeated objects are shallow copies of the original. So any updates to their properties affects the clones as well. This needs to be fixed, and I'll add it to the list. I think the solution is to update the code around L970 (https://github.com/jodeleeuw/jsPsych/blob/master/jspsych.js#L970) and make the element inside the push() a deep copy of the original element. It's a bit tricky because the type of that object isn't know in advance. I'm sure there are solutions out there for this.

A hack to fix your example would be to loop through the array before adding the index value and make a deep copy of the object with $.extend(). This will make sure that each object in arr is it's own object.

--Josh

--
You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/2bec9828-5f02-4604-9041-6633cb502919%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Adrian Oesch]

hi josh,

regarding img display speed: back when i experienced an img display lag, i was using the css background-image tag to display those preloaded images. i changed the display function to use a proper <img> element and the display speed has improved subjectively since then. i'm not sure how a browser actually interweaves these different languages, but it might have been just an interference between css and js. does that seem plausible?

just wanted to let you know. cheers ;)

[Josh de Leeuw]

interesting... I don't have enough knowledge about these deeper processing issues, but it seems plausible that the browser renders things differently when using CSS background images. thanks for the note!

--

You received this message because you are subscribed to the Google Groups "jsPsych" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jspsych+u...@googlegroups.com.
To post to this group, send email to jsp...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/jspsych/48c7ad31-af1b-4579-8b5a-e072f2b2bb83%40googlegroups.com.