Skip to content

Commit

Permalink
[Fiber] use srcset to trigger load even on img mount
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 committed Jul 25, 2024
1 parent 0117239 commit 0971bb4
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 0971bb4

Please sign in to comment.