Tukukkk

I have a Laravel web app that I developed to use as an eye chart in my office (ophthalmology). So just imagine looking at the chart with the big E and all the letters that get progressively smaller. All my functionality works fine except for speed of execution. When I press a keyboard button, the letters do not change all that fast and it's making me a little sad. I think I've narrowed it down to something with rendering the images? (The letters are actually individual PNG files, not just a font on the screen) But the largest one is like 47kb, not exactly a huge piece of content. The problem that I'm running into is that when I queue a line change, 5 images load on the screen for the patient to read. But they all take a decently long time to load....like 7 seconds sometimes. I'm running an Intel i5 processor that can get 1.9ghz. I really don't think it's that. I'm hosting this locally in the newest apache server on the WAMP stack. If I load lines continually one after the other, the images start to decrease their load time to something more reasonable. But if i let the page sit for 5 minutes then come back to it, it's like it resets and has to reload all the images initially again for 5+ seconds. Does anyone know any potential fix for this? I know it might sound broad but there's so many pieces to this puzzle that I'm not even sure where to start myself. Does chrome auto-cache images? Currently I'm loading them just by calling a reference to the path in the "public/imgs" folder in laravel. Is there a more efficient way to do this? Any help in any direction is appreciated, just want to make this be a little more responsive. Side note: I can stream youtube videos and load image content perfectly fine on other websites, which is why I'm so confused as to why my tiny little image files are taking so long to load. If anyone needs, the github to check this project out is github.com/maximus1127/eyechart. The app is using socket.io, redis, and node. So if you want to download it to play around, you need to configure those things. But the calls and messages get sent almost instantly, i really think it's just image loading trouble.

It looks like the images are getting loaded into the page each time you change a setting. You are adding/removing img elements to the DOM with each change.

$('#line1').html("<img src='/images/" + image[size[1]] + "'/> <img src='/images/" + image[size[2]] + "' /> <img src='/images/" + image[size[3]] + "' /> <img src='/images/" + image[size[4]] + "' /> <img src='/images/" + image[size[0]] + "' />" );

You could try pre-loading all the images once when the page is first loaded, then just hide/show/move them on the page with your jquery code based on the options you select.

<div class="display">



</div>



<div class="hidden">

    <img id="size-1" src="/images/...">

    ...

</div>

Then:

$('.display').append($('#size-1'));

Or something like that ... you get the idea.