Есть ли способ применить стиль CSS к загруженным изображениям до того, как они полностью загрузятся с помощью Gatsby и Sharp? - PullRequest
Новая
       44

Есть ли способ применить стиль CSS к загруженным изображениям до того, как они полностью загрузятся с помощью Gatsby и Sharp?

2 голосов
/ 21 мая 2019

Я использую Sharp для отложенной загрузки изображений на моем сайте Gatsby. В данный момент изображения становятся размытыми и «получают фокус», когда появляются на экране.

Я бы хотел применить стили CSS или фильтры к этим изображениям, пока они все еще находятся в «размытом режиме», и удалить их после полной загрузки. Но до сих пор я не вижу никаких изменений в классах до или после их загрузки.

Есть ли способ для изображений иметь класс, когда загружается вся страница, и терять этот класс, когда само изображение загружается полностью? Или, альтернативно, есть ли способ применить начальный стиль и затем удалить его при полной загрузке?

Спасибо!

1 Ответ

2 голосов
/ 04 июня 2019

Да, есть.Вы можете передать placeholderClassName & placeholderStyle реквизиты gatsby-image следующим образом: 

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