Skip to content

Commit

Permalink
[Fiber] use srcset to trigger load even on img mount (#30351)
Browse files Browse the repository at this point in the history
In #23316 we fixed a bug where
onload events were missed if they happened too early. This update adds
support for srcset to retrigger the load event. Firefox unfortunately
does not trigger a load even when you assign srcset so this won't work
in every browser when you use srcset without src however it does close a
gap in chrome at least
  • Loading branch information
gnoff authored Jul 25, 2024
1 parent 27d5dba commit 7f217d1
Showing 1 changed file with 11 additions and 0 deletions.
11 changes: 11 additions & 0 deletions packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js
Original file line number Diff line number Diff line change
Expand Up @@ -692,8 +692,19 @@ export function commitMount(
}
return;
case 'img': {
// The technique here is to assign the src or srcSet property to cause the browser
// to issue a new load event. If it hasn't loaded yet it'll fire whenever the load actually completes.
// If it has already loaded we missed it so the second load will still be the first one that executes
// any associated onLoad props.
// Even if we have srcSet we prefer to reassign src. The reason is that Firefox does not trigger a new
// load event when only srcSet is assigned. Chrome will trigger a load event if either is assigned so we
// only need to assign one. And Safari just never triggers a new load event which means this technique
// is already a noop regardless of which properties are assigned. We should revisit if browsers update
// this heuristic in the future.
if ((newProps: any).src) {
((domElement: any): HTMLImageElement).src = (newProps: any).src;
} else if ((newProps: any).srcSet) {
((domElement: any): HTMLImageElement).srcset = (newProps: any).srcSet;
}
return;
}
Expand Down

0 comments on commit 7f217d1

Please sign in to comment.