react Bug: onLoadStart is not passed to img

trafficstars

Although it seem a valid event, and it works using vanilla HTML/JS (at least Firefox, Chrome still have an open bug https://bugs.chromium.org/p/chromium/issues/detail?id=458851), it seems that using and onLoadStart event on an img is not working in react.

React version: 17.0.0

Steps To Reproduce

With Firefox open browser development tools
Disable browser's cache
Using Firefox go to https://ukpcn.csb.app/
Check the console

Link to code example: https://codesandbox.io/s/onloadstart-issue-ukpcn

The current behavior

The console shown:

Vanilla img loading
Vanilla img loaded
React img loaded

Seems that the onLoadStart is not working.

The expected behavior

The onLoadStart function should be executed, so logging also React img loading

Nov 25 '20 14:11 keul

Sounds interesting to me, I can dig into that ⛏

Nov 25 '20 20:11 ideffix

After some invastigation I've found that this behaviour is done on purpose. Please check file ReactDOMEventListener-test.js and test on line 328. Test description says: 'should dispatch loadstart only for media elements' - code checks that event handler functions should not be called on img element imgRef.current.dispatchEvent( new ProgressEvent('loadstart', {bubbles: false,}),); expect(handleImgLoadStart).toHaveBeenCalledTimes(0); @gaearon wrote in commit message:

In fact it never bubbles, even for . And since we don't special case it in the event attachment logic when we create it, we never supported <img onLoadStart> at all. We could fix it. But Chrome doesn't support it either: https://bugs.chromium.org/p/chromium/issues/detail?id=458851. Nobody asked us for it yet. And supporting it would require attaching an extra listener to every . So maybe we don't need it? Let's document the existing state of things.

I don't know if is it something that should be fixed or just let it as it is.

Nov 26 '20 19:11 ideffix

My understanding of the issues:

the onloadstart event is valid event for images in the specs: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/onloadstart
It's true is not supported by Chrome, but this is registered as a bug. The facts that chrome had this issue will make the feature unusable on most of the users, but still…

I'm not sure why React should handle this differently from what the browser is doing.

Nov 27 '20 15:11 keul

same issue

Jun 11 '21 21:06 ghost

I am experiencing the same problem. It would be great if this issue could be sorted.

Aug 05 '21 14:08 jhughes982

This seems like something that will need to be fixed for triggering suspense boundaries for images using the loading='lazy' attribute.

Nov 11 '21 10:11 sami616

Tried all of these, only onLoad and onload was printed to the console.

<img
  src={getStaticAssetURL('core.gif')}
  onLoad={() => console.debug('onLoad')}
  onLoadStart={() => console.debug('onLoadStart')}
  onLoadedData={() => console.debug('onLoadedData')}
  onLoadedMetadata={() => console.debug('onLoadedMetadata')}
  ref={ref => {
    if (!ref) return
    ref.onload =  () => console.debug('onload')
    ref.onloadstart = () => console.debug('onloadstart')
    ref.onloadeddata = () => console.debug('onloadeddata')
    ref.onloadedmetadata = () => console.debug('onloadedmetadata')
  }}
/>

Oct 20 '23 00:10 ackvf

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!