Question

我想收听我的图像的 load 事件。这就是我正在尝试的方式。

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>
    );
};

据我所知，这段代码应该可以正常工作。但是当图像被缓存时，它们不会不时触发 load 事件。

我需要知道，什么时候我的所有图片都被加载了。为此，我检查了加载图像的数量。但是当至少 1 张图像没有触发事件时它不起作用。 error 事件也不会触发，我可以看到所有图像始终加载到调试器工具中。

我该怎么办？

我知道我可以添加类似 src?_dc=timestamp 的内容，但我确实需要缓存，它确实加快了重新上传的速度。

UPD：所有加载的图像都返回 304 状态。但是触发 load 的图像数量从 0 到总数不等

Answer 1

出现这个问题是因为它总是从缓存中获取图像

请在图片网址后添加时间戳

两边都可以

从后端（数据库端）

例如：

 @ImagePath+ REPLACE(ImagePath, '~', '') + '?time='+FORMAT(getdate(),'yyyyMMddHHmmssffff')

在 IONIC 代码（打字稿）中

例如：

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

Answer 2

好的，这不是我想要的，但我发现了一个可以帮助我的东西 - completed 字段

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>
    );
};

这段代码确实解决了我的问题，但它似乎是一个拐杖。所以，我决定把这个解决方案留在这里，但我仍在等待正确的答案

OnLoad 不会在缓存图像上触发

2 个答案: