TileImage/tileLoadFunction: (slow) sequentially tile loading / pause between tileloadend/start

Hello!

I’m not sure if this is a bug or i’m the first one who cares about that. 😃

Describe the bug When loading tiles with tileLoadFunction, there is a variable “pause” between two tiles (tileloadend and the next tileloadstart). And because the tiles are loaded sequentially, it takes “too long” to render a layer.

I googled a lot and didn’t find an answer or how i can change this behavior.

To Reproduce See console output on https://jsfiddle.net/hdkpvrac (zoom in) my browser: Chrome/85.0.4183.123

[3, 8, 9], 1601925605154, "tileloadstart"
[3, 8, 9], 1601925605154, "tileloadend"
"pause was (ms)", 41
[3, 8, 10], 1601925605195, "tileloadstart"
[3, 8, 10], 1601925605195, "tileloadend"
"pause was (ms)", 27
[3, 8, 11], 1601925605222, "tileloadstart"
[3, 8, 11], 1601925605223, "tileloadend"
"pause was (ms)", 23
[3, 8, 12], 1601925605246, "tileloadstart"
[3, 8, 12], 1601925605247, "tileloadend"
"rendercomplete, pause sum (ms)", 710

Sure, you could say that’s not that much, but if you have multiple layers with many tiles, it adds up to a non user-friendly behavior.

Expected behavior

• Faster tile loading. 😃
• There should’nt be a pause between two tiles (?)
• async/concurrent tileloadstart

Thanks for your time. 😃

[ahocevar]

The problem with your example code is that the url https://xyz is the same for all tiles. That url is used as unique key for the tile queue, but obviously it is not unique. So make sure the tile url is unique for each tile, e.g. by changing it to https://{z}/{x}/{y}.

I have applied this change to your example, and also changed your test layer so you can see on the map when a tile is loaded: https://jsfiddle.net/xac3q84n/2/

[ahocevar]

@mst2020 Better than improving the documentation, we can improve the implementation. See #11646.