0

I'm looking for best solution to throttle image download in SPA application.

Problem:

On slow network, when entering details page there's a lot of image downloads happening that are maxing-out browser connections, which breaks(makes unresponsive) UI that requires connections to do AJAX request on button clicks.

I'm looking for some HTTP/browser API to throttle image downloads at given time. Do you know is something like this exists?

Other approach I would like to have is ability to kill all GET request on button click (that could also solve this issue).

I cannot find such APIs. Maybe inserting these images as 'prefetch' could be good idea?

Or I have to "lazy" load these images as <img data-src="url"> and then put them to custom fetcher that does up to 3 request at the time?

EDIT: found some related issues:

Machiaweliczny
  • 552
  • 1
  • 6
  • 13

1 Answers1

1
  1. Best is using a Lazy loading Module/Library of your SPA Framework . For example this library for React seems to be widely used: https://github.com/twobin/react-lazyload. I would defenitely use this approach.
  2. Build an lazy image loader yourself. Insert a placeholder image (or low quality image) that you then replace with the final image.
  3. Yes. Parallel downloads per Domain are limited. But you can create a second Domain (=Subdomain) where you host your images so this can effectively increase the amount of parallel downloads. (But of course not the total bandwith).
  4. Preloading: Just as a note: If you have a large app with lots of navigations paths/screens, it might be a waste of ressources if you download images of pages (or section of the page) the user then will not visit... I would not rather do this, as mobile traffic is quite costly!
  5. Have a look at the "importance" Attribute of an img Tag: importance Indicates the relative download importance of the resource. Maybe this helps? But never used this before...

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img

importance 
Indicates the relative download importance of the resource. Priority hints allow the values:
auto: no preference. The browser may use its own heuristics to prioritize the image.

high: the image is of high priority.

low: the image is of low priority.
Markus
  • 3,352
  • 3
  • 34
  • 38
  • No SPA framework - I'm just using React for rendering. – Machiaweliczny Oct 18 '19 at 16:12
  • I updates the answer. There seem to be very good React Libraries, here is a tutorial https://www.freecodecamp.org/news/how-to-optimize-react-applications-with-lazy-loading-232183e02768/ (The interesting part about lazy loading starts in the middle of the article) – Markus Oct 18 '19 at 16:20