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

答案需要几个步骤：

将动画提取到单独的类中，例如： G。 .uncached
如果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

仅在未缓存图像时触发CSS img动画

1 个答案:

以下是一个示例（适用于Chrome）：https://jsfiddle.net/cevL65py/2/