Image: Address onLoad not being called for SSR images #3612
Conversation
✅ Deploy Preview for gestalt ready!Built without sensitive environment variables
To edit notification comments on pull requests, go to your Netlify site configuration. |
| const { _fixCompletedOnLoad } = this.props; | ||
| // For certain scenarios, such as server-side rendering, the image may already be loaded by the time the component is rendered resulting in the onLoad event not being triggered. | ||
| // To address these, we can use a ref callback and check whether the image is already loaded - if it is, we trigger the onLoad event manually. | ||
| if (_fixCompletedOnLoad && node?.complete && !this.onLoadCalled) { |
There was a problem hiding this comment.
!this.onLoadCalled
so handleLoad when image loads and we set this.onLoadCalled = true;. Then, when it renders we set the ref and we check onLoadCalled
handleLoad gets sets manually if this.onLoadCalled = true;.
"if it is, we trigger the onLoad event manually."
should && !this.onLoadCalled be && this.onLoadCalled
There was a problem hiding this comment.
!this.onLoadCalled is here to guard against a scenario where the native img load callback is fired (and onLoad called) before the ref callback
i think the only situation where this could happen is:
- image component renders
- image request completes very quickly
- ref callback is triggered
i think this would be an edge case but wanted to play it safe
Summary
<Image />accepts anonLoadcallback which ends up being attached to the nativeimgelement'sloadevent handler and is triggered once the image resource has finished loading.The problem with this approach is that the
onLoadhandler does not get triggered if the image resource has already finished loading before the<Image />component is rendered. The most common scenario of this happening is server-side rendering since the image request will be kicked off via the server-rendered HTML and, very likely, be completed by the time client hydration happens.Change
This PR introduces a fix for this by attached a ref callback to the native
imgcallback which will do the following:_fixCompletedOnLoadis true, the img complete attribute is true, and theonLoadcallback has not yet been triggeredonLoadwill a fake load Event. Because the load event has already happened, we need to construct our own.Why is this in an experiment
I discovered this issue when debugging an impression drop with my Masonry V2 experiment. I found that, because my experiment resulted in the initial server rendered Pins not being unmounted/re-mounted, the image onLoad callbacks were never being triggered and consequently, we were not logging impressions.
I'm planning to test this change across both control and enabled groups of the Masonry V2 experiment to validate this and in parallel, will chat with metrics quality about rolling this out since it could have impression impact.