有没有办法在它们完全加载 Gatsby 和 Sharp 之前将 CSS 样式应用于延迟加载的图像？答案

【问题标题】：Is there a way to apply CSS styling to lazy-loaded images before they fully load with Gatsby and Sharp?有没有办法在它们完全加载 Gatsby 和 Sharp 之前将 CSS 样式应用于延迟加载的图像？
【发布时间】：2019-10-08 00:48:31
【问题描述】：

我使用 Sharp 在我的 Gatsby 网站上延迟加载图像。目前，当图像出现在屏幕上时，它们开始变得模糊并“获得焦点”。

我想在这些图像仍处于“模糊模式”时对其应用 CSS 样式或过滤器，并在它们完全加载后将其删除。但到目前为止，我在加载之前或之后没有看到类有任何变化。

有没有办法让图像在整个页面加载时拥有一个类，而在图像本身完全加载时失去该类？或者，有没有办法应用初始样式，然后在完全加载时将其删除？

谢谢！

【问题讨论】：

运气好能解决这个问题吗？
是的，您使用 placeholderClassName 的解决方案有效！非常感谢！

标签： css reactjs gatsby sharp

【解决方案1】：

是的，有。您可以像这样将placeholderClassName 和placeholderStyle 道具传递给gatsby-image：

<Img 
    placeholderClassName="myPlaceHolderClassName"
    placeholderStyle={{transform: `rotate(90deg)`}}
    fluid={edge.node.fluid}
/>

【讨论】：