使用不同的 Lottie 动画而不进行 http 请求

Question

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

Answer 1

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

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

LocalStorage documentation on MDN

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

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

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

使用不同的 Lottie 动画而不进行 http 请求

Use differnet Lottie animations Without making http requests

javascript

html

css

animation

lottie