Skip to content

Commit 0971bb4

Browse files
committed
[Fiber] use srcset to trigger load even on img mount
In facebook#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
1 parent 0117239 commit 0971bb4

File tree

1 file changed

+11
-0
lines changed

1 file changed

+11
-0
lines changed

packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js

+11
Original file line numberDiff line numberDiff line change
@@ -692,8 +692,19 @@ export function commitMount(
692692
}
693693
return;
694694
case 'img': {
695+
// The technique here is to assign the src or srcSet property to cause the browser
696+
// to issue a new load event. If it hasn't loaded yet it'll fire whenever the load actually completes.
697+
// If it has already loaded we missed it so the second load will still be the first one that executes
698+
// any associated onLoad props.
699+
// Even if we have srcSet we prefer to reassign src. The reason is that Firefox does not trigger a new
700+
// load event when only srcSet is assigned. Chrome will trigger a load event if either is assigned so we
701+
// only need to assign one. And Safari just never triggers a new load event which means this technique
702+
// is already a noop regardless of which properties are assigned. We should revisit if browsers update
703+
// this heuristic in the future.
695704
if ((newProps: any).src) {
696705
((domElement: any): HTMLImageElement).src = (newProps: any).src;
706+
} else if ((newProps: any).srcSet) {
707+
((domElement: any): HTMLImageElement).srcset = (newProps: any).srcSet;
697708
}
698709
return;
699710
}

0 commit comments

Comments
 (0)