css - 仅当图像未缓存时触发 CSS img 动画

Question

我自己的照片 website加载了我喜欢的模糊动画:

HTML:

<div class="christopher-img" style="background:url(../../assets/img/chris.jpg)"></div>

SASS:

.christopher-img 
    width: 200px
    height: 200px
    border-radius: 50%
    margin: 0 auto
    background-color: white
    filter: blur(3px)
    animation: unblur 1s
    animation-delay: 1s
    animation-fill-mode: forwards

.christopher-img::after
    animation: low-quality 1s
    animation-delay: 1s

@keyframes low-quality
    0% 
        background-image: url(../../assets/img/chris_low_quality.jpg)

@keyframes unblur
    100% 
        filter: blur(0px)

但是每次访问主页都会触发动画，我想改变一下。

如何在特定条件下触发动画？我怎么知道图像是否已被用户缓存？

Answer 1

答案需要几个步骤:

1. 将动画提取到单独的类中，例如。 G。 .uncached
2. 如果resource.transferSize为零然后将 .uncached 类添加到图像

为了获得最佳效果，您的 JS 应该正好位于 HTML 中的图像下方。

这是一个例子(适用于 Chrome):https://jsfiddle.net/cevL65py/2/

检查 API 和缓存断言的控制台。

这是最重要的部分:

const imageData = performance.getEntriesByName(url)
const isUncached = imageData.length > 0 ? imageData[0].transferSize !== 0 : true