动态加载未缓存的图像

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文件中并加载一次！这种方式使用内部引擎进行渲染，效率更高，并且不会影响用户体验。