increase load time by loading these images in js?

[Chovin]

@wiglesworthj could you give me your opinion on this?

https://github.com/OIT-UOG/specify-webportal-installer/blob/0930582825bb9e4b84a9803229fb8677274dd4af/PortalApp/app/view/ThumbnailView.js#L89-L99

The above snippet of code loads a page of images from https://specifyportal.uog.edu/ You can see however that when I load a new page, the site becomes unresponsive.

Do you think this be because it is waiting for the images to load?

Maybe we can load them all asynchronously in JS. I don't really need the img tags for anything other than their onload attribute. the images are actually shown as a background of their parent. I wonder if this is looked down upon as a solution:

<img src onerror='alert()'>

[wiglesworthj]

I ran a quick audit using chrome. On average each image takes about 35ms (they're optimized to around 40-75kb each) to load on campus and hardwired. Because of this, when you load the "Next 100" you get a hang of around 3.5s. Additionally, each image is being sent as a new request (see image below) requiring a DNS lookup, request sent, waiting, etc. . . I'm not sure the solution for this, but it's definitely another reason for the hang. Finally, yes, the requests are happening synchronously, waiting until the image fully loads from the server before sending the next request. I would attempt to make them asynchronous and see if it improves load times.