diff --git a/src/Image.tsx b/src/Image.tsx index 8b647a42..66fd227e 100644 --- a/src/Image.tsx +++ b/src/Image.tsx @@ -110,6 +110,8 @@ const ImageInternal: CompoundedComponent = ({ }); const canPreview = preview && !isError; + const isLoaded = React.useRef(false); + const onLoad = () => { setStatus('normal'); }; @@ -157,8 +159,10 @@ const ImageInternal: CompoundedComponent = ({ }; const getImgRef = (img?: HTMLImageElement) => { + isLoaded.current = false; if (status !== 'loading') return; if (img?.complete && (img.naturalWidth || img.naturalHeight)) { + isLoaded.current = true; onLoad(); } }; @@ -185,7 +189,7 @@ const ImageInternal: CompoundedComponent = ({ if (isError) { setStatus('normal'); } - if (isCustomPlaceholder) { + if (isCustomPlaceholder && !isLoaded.current) { setStatus('loading'); } }, [imgSrc]); diff --git a/tests/placeholder.test.tsx b/tests/placeholder.test.tsx index 5d1124ae..20ee2778 100644 --- a/tests/placeholder.test.tsx +++ b/tests/placeholder.test.tsx @@ -60,14 +60,6 @@ describe('Placeholder', () => { />, ); - expect(wrapper.find('.rc-image-placeholder').get(0)).toBeTruthy(); - - act(() => { - wrapper.setProps({}); - jest.runAllTimers(); - wrapper.update(); - }); - expect(wrapper.find('.rc-image-placeholder').get(0)).toBeFalsy(); domSpy.mockRestore();