CODEWITHSUNDEEP
phpimage
Emilio Gaines
Emilio Gaines

Reputation: 95

Loading several thousands of images efficiently

I am developing a website that uses Google Maps.
The map has 4000-5000 markers.

Upon the client enters the website the server determines all "active" markers and sends a JSON document telling the client information about each marker and what marker-icon to use (a url to an image on the server, ex: icon: '/icon/xxx.png').
The website loads instantly but it takes about 5 seconds until all markers are shown since the client has to fetch those ~5000 images.

The images can change so the server only knows when the client ask for it, exactly which image each marker uses.
How can I speedup this process?
Can I dynamically create a spritesheet of some sort or pack all those files and let the client unpack them for faster loading?
The server backend is PHP för this part.

Chrome network overview for fetching the images

Upvotes: 0

Views: 50

Answers (1)

Howard Tomlinson
Howard Tomlinson

Reputation: 71

You can indeed create a spritesheet, or if they are relatively simple in style, you can also create them dynamically as SVGs within your page code, and when you declare each marker, you give it a path defined in SVG within your JS (as served by your main page, or a static file containing functions for many of them).

SVG info here: https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths

Some good examples in this prior answer : How to use SVG markers in Google Maps API v3

A spritesheet is a good way to do this if the total number is relatively unchanging, and each client is likely to use a large subset of the sprites.

The downside of a spritesheet in my experience is maintenance - combining a code and an art workflow can be a bit of a pain!

Upvotes: 1

Related Questions