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

Question

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

我正在寻找一种解决方案，仅延迟加载浏览器以前未缓存的图像。当前，所有通过CDN缓存并从网络缓存的延迟加载的图像都将立即加载，但是src更改和动画仍然存在。

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

如果通过后端更轻松地完成此操作，则我的应用程序正在使用Ruby on Rails。

Answer 1

您可以像这样使用异步“ window.caches.match”函数：

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

在这里阅读：https://www.darrenlester.com/blog/instantly-loading-cached-images