1918728 - XMLHttpRequest onprogress returns empty event if data preloaded

Status: UNCONFIRMED

(Core :: DOM: Events, defect)

Description

[James [:FormularSumo]]

Attachment: Firefox event.png

User Agent: Mozilla/5.0 (X11; Linux x86_64; rv:130.0) Gecko/20100101 Firefox/130.0

Steps to reproduce:

Preload a network resource in index.html, eg
<link rel="preload" href="[data]" as="fetch" crossorigin/>

Later the your code, fetch the same network resource using new XMLHttpRequest()
Create an onprogress function for this XMLHttpRequest

Actual results:

Event returned when onprogress is called is blank, so can't be used for example for showing a progress bar while the resource is loading.
The resource does still got loaded, and when it does it works fine, accessing it using the XMLHttpRequest. And onprogress is called at the correct times. The only issue is that it's called with a blank event so can't be used.

If I remove the preload link, onprogress returns the correct event so can be used to eg display a progress bar. However this causes the network request to take longer to load, as the fetch request doesn't begin until after the javascript code containing the XMLHttpRequest has been loading and executed.

Expected results:

onprogress should return the correct event, even when the resource has been set to preload. This is the behaviour of Chrome and Safari - see attachments where I output the event to the console.

My use case for this is a Love2D/Love.js game I distribute through the web. I preload the game.data file as it is considerably larger than the rest of the project and is needed to play the game, and I display a progress bar while the file is being downloaded. Otherwise it can only be fetched after the game.js and love.wasm files have been loaded, which themselves take a non-negligible amount of time. As mentioned above, this works as expected on Chrome and Safari, but not Firefox unfortunately, meaning the game just says "Downloading" for the game.data file without any other progress indication until finished.

The source code for my preload + XMLHttpRequest is here - https://github.com/FormularSumo/Star-Wars-Galaxy-Collection-Web/tree/main/src - contained in index.html and game.js. I've tested on Firefox & Chrome on Linux & Android, and Safari iOS.

Comment 1

[James [:FormularSumo]]

Attachment: Chrome event.png

Comment 2

[James [:FormularSumo]]

Attachment: Safari event.jpeg

Comment 3

[James [:FormularSumo]]

Attachment: Firefox event extended.png

Comment 4

[James [:FormularSumo]]

Attachment: Chrome event extended.png

Comment 5

[Sean Feng [:sefeng]]

Hi, thanks for the bug report.

Can you provide an instruction to run your example? Or if you can make a simpler example, that'd also helpful.

Thanks!