React svg / png 渲染在新 URL 上闪烁

IT技术 reactjs react-router
2021-05-15 15:06:21

我正在使用最新的create-react-app配置并在不同路由之间切换时面临问题。

我所有SVG的都包含在精灵文件中。从逻辑上讲，sprite.svg文件应该在第一页加载时缓存。

但是相反，每次更改路线（有react-router4 个）都会加载这个文件，这会导致闪烁。内容立即更改，但图像加载延迟 1 秒。png包含通过importin相同jsx。

从我在控制台中看不到的内容来看，相同的文件一遍又一遍地下载。

http://cabin.surge.sh/ 上的现场演示（即尝试在标题部分的定价/关于页面之间进行更改）

在此处输入图片说明

更新：

我包含 SVG 图像的方式 - 是愚蠢的组件 <SvgIcon name="checkmark" />

import React, { Component } from 'react';
import sprite from '../images/sprite.svg';

export default class SvgIcon extends Component {
  render(){
    const { name } = this.props;
    return(
      <svg className={"ico ico-" + name}>
        <use xlinkHref={sprite + "#ico-" + name}></use>
      </svg>
    )
  }
}

PNG 图片

<img src={require(`../images/${authorImage}.png`)} srcSet={require(`../images/${authorImage}@2x.png`)  + ' 2x'} alt=""/>
2个回答

你得到一个200而不是的原因304是你有一个服务工作者，它将拦截请求并从缓存本身提供相同的服务。这本身就是200响应。如果您禁用服务工作者，那么您将获得304

返回 200 的服务人员

如果问题是没有更早获取图像并导致页面更改时闪烁，请尝试使用

componentDidMount() {
  const sprite = "../images/sprite.svg";
  const prefetchLink = document.createElement("link");

  prefetchLink.href = sprite;
  prefetchLink.rel = "prefetch";
  prefetchLink.as = "image";
  document.body.appendChild(prefetchLink);
}

这将提示浏览器在后台（空闲时间）获取稍后可能需要的资源，并将它们存储在浏览器的缓存中。页面加载完成后，它会开始下载其他资源，如果用户随后单击预取链接，它将立即加载内容。

对于功能版本：

//custom hook to preload image
const usePreload = (url) => {
  const [loaded, setLoaded] = React.useState(false);
  const onLoad = React.useCallback(() => {
    setLoaded(true);
  }, []);
  React.useEffect(() => {
    const prefetchLink = document.createElement('link');
    prefetchLink.href = url;
    prefetchLink.rel = 'prefetch';
    prefetchLink.as = 'image';
    prefetchLink.addEventListener('load', onLoad);
    document.body.appendChild(prefetchLink);
    //clean up
    return () => document.body.removeChild(prefetchLink);
  }, [onLoad, url]);
  return loaded;
};

export default function SvgIcon({ name }) {
  const url = sprite + '#ico-' + name;
  const loaded = usePreload(url);
  return (
    loaded && ( //only render if image is loaded
      <svg className={'ico ico-' + name}>
        <use xlinkHref={url}></use>
      </svg>
    )
  );
}

请注意，如果您进行服务器端渲染，您不希望此代码在服务器上执行，因为服务器上没有document。

其它你可能感兴趣的问题
上一篇React Native，如何在语言更改后更新视图 下一篇如何在某些react组件中隐藏导航栏