动态加载未缓存的图像

Question

我试图将动画图像加载到元素顶部，并为此进行操作，在png列表（标记为1-124）之间进行切换，并为每个png创建图像元素，并为它们提供src。

我的想法是，我可以有一个空的图像元素，并运行一个函数，以每25毫秒与列表中的下一个图像交换src，从而获得动画效果。

在Mac（chrome）上，这一次可以正常工作，因为它可以一次加载图像，然后在不加载任何图像的情况下似乎更改了src（我通过在chrome dev工具的“网络”标签中查看来进行了检查）。

但是由于某些原因，在我的Windows PC上，它很慢，并且尝试每25毫秒再次从服务器加载图像。

cycle_images: function() {
    this.imageCount = (this.imageCount < 123) ? this.imageCount + 1 : 0;
    document.querySelector('.animated_image').html = this.imageList[this.imageCount];
},

这是我正在使用的代码，我感到困惑，为什么它在我的Macbook上却不能在我的PC上正常工作。 有什么方法可以强制图像不重新加载而仅从缓存中删除？

Answer 1

一种解决方案是创建124个img ，并使它们在页面上不可见，然后相应地更改图像。

但是最挑剔和正确的方法可能是将这些图像连接到一个gif文件中，然后加载一次！ 这种方式使用内部引擎进行渲染，效率更高，并且也不会影响用户体验。