设置本机延迟加载图像的动画（加载=““延迟””）

Question

当前，属性为loading="lazy"（https://web.dev/native-lazy-loading/）的图像在加载后立即显示，即没有淡入效果。

是否有一种方法可以使图像在加载时具有loading="lazy"属性的动画，并且最好不要使用JavaScript？

我知道，有许多延迟加载JavaScript库，但是由于现在加载是由浏览器本地完成的，因此通过JavaScript进行处理似乎又是一次回退。

Answer 1

我设法使用了一个简单的jQuery解决方案，因为在我的情况下已经使用了它：

 //fade in lazy loaded images
 $('article img').on('load', function(){
    $(this).addClass('loaded');
 });

图像的默认不透明度为0，新类的不透明度为1

img{
    opacity: 0;
    transition: opacity 300ms ease-in-out;
}

img.loaded{
    opacity: 1;
}

这很不好，因为没有JS的用户不会看到图像...但是坦率地说，我不在乎^^老实说，谁禁用了JS？

Answer 2

不幸的是，它不像上面的简单jQuery解决方案那样简单。 .on('load')不适用于所有浏览器（例如Chrome），如下所述：Check if an image is loaded (no errors) with jQuery

Answer 3

我认为您必须使用@keyframes，例如：

@keyframes lazy-kf{
    from {opacity:0;}
    to {opacity:1;}
}
img[loading=lazy] {
    animation: lazy-kf 5s;
}