OnLoad doesn't fire on cached images

user_11589183 0
Viewed 511

I'd like to listen to the load event of my images. And here's how I'm trying to.

export const Picture: FC<PictureProps> = ({ src, imgCls, picCls, lazy, alt: initialAlt, onLoad, onClick, style }) => {
    const alt = useMemo(() => initialAlt || generator.next().value, [src, initialAlt]);
    const { publicRuntimeConfig } = getConfig();

    return (
        <picture style={style} className={picCls}>
            {!publicRuntimeConfig.dev && <source srcSet={`${src}.webp`} type="image/webp"/>}
            <img onLoad={onLoad} className={imgCls} alt={alt} src={src} loading={lazy ? 'lazy' : 'eager'}
                 onClick={onClick} />
        </picture>
    );
};

As I understand, this code should work fine. But when images are cached, they don't trigger load event from time to time.

I need to know, when all my images are loaded. To do this I checked the amount of loaded images. But it doesn't work when at least 1 of images didn't trigger the event. error event doesn't fire as well, and I can see that all of images are always loaded in the debugger tools.

What should I do?

I know I can add something like src?_dc=timestamp, but I do need caching, it really speeds up re-upload.

UPD: All of the loaded images returns 304 status. But the amount of images, that triggers load differs from 0 to total amount

typescript next.js reactjs events javascript
2 Answers

this issue occurs because always it fetch images from cache

please add timestamp after image URL

you can do it from both side

  1. From Backend (DB side)

for example :

 @ImagePath+ REPLACE(ImagePath, '~', '') + '?time='+FORMAT(getdate(),'yyyyMMddHHmmssffff')
  1. in IONIC code (Typescript)

for example :

npm i moment --save
import * as moment from moment
const dateStringThatWorksForIonicDatepicker = moment.unix(1536883200000).format(‘YYYY-MM-DD’)
user_149065840

Okay, this is not exactly what I asked for, but I found one thing that can help me - the completed field

export const Picture: FC<PictureProps> = ({ src, imgCls, picCls, lazy, alt: initialAlt, onLoad, onClick, style }) => {
    const alt = useMemo(() => initialAlt || generator.next().value, [src, initialAlt]);
    const ref = useRef<HTMLImageElement>();
    const onLoadTriggered = useRef(false);
    const { publicRuntimeConfig } = getConfig();

    const onLoadFunc = useCallback(() => {
        !onLoadTriggered.current && onLoad?.();
        onLoadTriggered.current = true;
    }, [onLoad]);

    useEffect(() => {
        ref.current.complete && onLoadFunc();
    }, []);

    return (
        <picture style={style} className={picCls}>
            {!publicRuntimeConfig.dev && <source srcSet={`${src}.webp`} type="image/webp"/>}
            <img onLoad={onLoadFunc} className={imgCls} alt={alt} src={src} loading={lazy ? 'lazy' : 'eager'}
                 ref={ref} onClick={onClick} />
        </picture>
    );
};

This code did solve my problems, but it seems like it's a crutch. So, I've decided to leave this solution here, but I'm still waiting for the correct answer

user_115891830
Related