如何处理大的原始图片重渲染导致React应用滞后的问题?

我正在使用CSS修改用户刚上传的背景图片的背景位置(所以是一个原始的Data URI),但如果图片是>1mb,重渲染就开始滞后。

对于较小的图片则不存在这个问题。

有什么办法可以解决这个问题,除了优化渲染?我已经不重新渲染了,除非背景位置变化至少1%(即重新渲染之间的变化是1%或更大)。

当我托管同一图片,然后从一个URL加载图片时,这个问题就不存在了。

你可以在一个小的网站上看到这个问题 CodeSandBox 我做的。在默认的URL中使用图片效果很好,但取文件上传时却非常滞后。

我能否以某种方式缓存数据?这似乎是因为原始数据没有被缓存,而图片却被缓存了,所以才会滞后。

解决方案:

我稍微修改了一下逻辑,并改变了以下内容 styles.backgroundPositionY 以直接通过 ref 元素进行样式操作。我看不出有什么大的改进。上传的图片在移动的时候确实很滞后,而默认的图片却很灵活。

const imageDivRef = useRef(null);

  const onUpload = e => {
    new Promise((resolve, reject) => {
      const reader = new FileReader();

      reader.onload = onLoadEvent => {
        const dataUri = onLoadEvent.target.result;
        let image = new Image() // try to cache that
        image.src = dataUri;
        image.onload = () => {
          resolve(dataUri);
        }
      };

      reader.readAsDataURL(e.target.files[0])

  }).then(dataUri => {
    updateBackgroundImage(dataUri)
  })
};

  const onPan = e => {
    const y = position.y;
    const delta = (e.deltaY / CONTAINER_HEIGHT) * -100;
    requestAnimationFrame(() => {
      imageDivRef.current.style.backgroundPositionY = `${Math.min(
        Math.max(y + delta, 0),
        100)}%`
    })

  };

  const onPanEnd = e => {
    const y = position.y;
    const delta = (e.deltaY / CONTAINER_HEIGHT) * -100;
    requestAnimationFrame(() => {
    imageDivRef.current.style.backgroundPositionY = `${Math.min(
      Math.max(y + delta, 0),
      100)}%`
    })
  };

还有一个疯狂的想法。抛弃 backgroundPositionY,使包装div的溢出隐藏并固定大小,在它里面放入img元素,并用 transform: translateY(unit) 财产。不知道能不能更快…

给TA打赏
共{{data.count}}人
人已打赏
未分类

Gcc在MacOS 10.15.4 Catalina上不能用?

2022-9-13 13:56:41

未分类

Java包装器方法练习问题

2022-9-13 14:07:36

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索