我怎样才能不延迟加载以前由浏览器缓存的图像？答案

【问题标题】：How can I not lazy load images that were previously cached by the browser?我怎样才能不延迟加载以前由浏览器缓存的图像？
【发布时间】：2019-06-26 05:35:56
【问题描述】：

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

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

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

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

【问题讨论】：

标签： javascript jquery lazy-loading browser-cache

【解决方案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

【讨论】：