javascript - 动画原生延迟加载图像(加载 ='“lazy” )

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？