Javascript 如何才能不延迟加载以前由浏览器缓存的图像？

我有一个有趣的难题一直困扰着我一段时间了，似乎找不到解决办法。目前，我正在使用一种基本的jQuery方法（在带有src占位符图像的img标记中使用data src，并使用jQuery将data src转换为src）来加载用户在页面加载后立即看到的带有淡入动画的懒散图像。这显然大大增加了自实现以来的加载时间，但代价是缓存的图像在页面加载时仍将初始数据src保留在img标记上，并且每次都从占位符图像切换（和淡出）所有图像

我正在寻找一个解决方案，只懒散地加载以前没有被浏览器缓存的图像。目前，所有延迟加载的图像都通过CDN和网络缓存，并立即加载，但src更改和动画仍然存在

不寻找新的插件（或说“只需删除动画”的响应）只是一种js方式（如果可能）来循环页面上的img标记，获取数据src属性，并在页面加载时将其移动到src属性（如果图像已经缓存在浏览器中）。最后一部分是我一直很难找到的解决方案

---

如果通过后端更容易做到这一点，我的应用程序将使用Ruby on Rails。

您可以使用异步“window.caches.match”函数，如下所示：

window.caches.match('/assets/css/main.css?v=8d1207d318')
  .then(cache => {
    if (cache) {
        // load image url immediately
    }
  })

请看这里：