1

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

Yoskutik
  • 1,859
  • 2
  • 17
  • 43
  • Does this answer your question? [image.onload event and browser cache](https://stackoverflow.com/questions/12354865/image-onload-event-and-browser-cache) – mwryl Jun 14 '21 at 12:00
  • 1
    This question is about pure JavaScript. I've already read this, and as you see I tried to define `onLoad` earlier than `src` in `` tag – Yoskutik Jun 14 '21 at 12:02

2 Answers2

1

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

Yoskutik
  • 1,859
  • 2
  • 17
  • 43
0

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’)
Mansi Mistry
  • 189
  • 1
  • 9