时间戳

首页 > 解决方案 > OnLoad 不会在缓存的图像上触发

javascript - OnLoad 不会在缓存的图像上触发

问题描述

我想听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 到总量不同

标签： javascriptreactjstypescripteventsnext.js

解决方案

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

请在图片 URL 后添加时间戳

你可以从两边做

  1. 从后端（数据库端）

例如 ：

 @ImagePath+ REPLACE(ImagePath, '~', '') + '?time='+FORMAT(getdate(),'yyyyMMddHHmmssffff')
  1. 在 IONIC 代码（打字稿）中

例如 ：

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

推荐阅读