From 0971bb463d8f93d19efbb806d1cc3bb96c3d74a8 Mon Sep 17 00:00:00 2001 From: Josh Story Date: Tue, 16 Jul 2024 08:49:52 -0700 Subject: [PATCH] [Fiber] use srcset to trigger load even on img mount In https://github.com/facebook/react/pull/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 --- .../src/client/ReactFiberConfigDOM.js | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js index 3d5c730e428..e78f65154f3 100644 --- a/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js +++ b/packages/react-dom-bindings/src/client/ReactFiberConfigDOM.js @@ -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; }