时间戳

首页 > 解决方案 > 使用不同的 Lottie 动画而不发出 http 请求

javascript - 使用不同的 Lottie 动画而不发出 http 请求

问题描述

我正在开发一个与骰子相关的小游戏。我有 6 个 Lottie 动画，每个都对应一个骰子脸。当用户单击“滚动”时，随机骰子面朝上。因此是一个随机的 Lottie 动画。问题是每个动画文件（json 文件）是 320 kb。每当用户点击滚动时，网站都会发出一个可能需要 300-400 毫秒的 http 请求。我正在寻找一种无需 http 请求即可使用这些动画的方法。换句话说，每当我单击滚动时，动画都会平滑渲染。此外，我更喜欢该解决方案对 PWA 对未来计划友好。

我正在创建的游戏

标签： javascripthtmlcssanimationlottie

解决方案

您可以在页面加载时执行请求，并将结果存储在 LocalStorage 中，以便在需要时使用。

localStorage.setItem('dice-face-1', JSON.stringify(LottieContent));
const diceFace1 = JSON.parse(localStorage.getItem('dice-face-1'));
localStorage.setItem('dice-face-2', ...

MDN 上的 LocalStorage 文档

进一步说明：这将为下次访问您的游戏的用户存储骰子面“lottie-data” :)

然后您还需要能够使缓存的数据无效，因此当您更新您的 lottie 数据时，用户也会获得您想要的数据。

const newVersion = 1.03;
localStorage.setItem('lottie-data-version', 1.02);
const lottieDataVersion = localStorage.getItem('lottie-data-version');
if(lottieDataVersion < newVersion){
  localStorage.removeItem('dice-face-1');
  ...(invalidate other data)
}

推荐阅读