React & ServerSideRendering: отображение анимации загрузки изображения с правильным соотношением сторон - PullRequest
Новая
       5

React & ServerSideRendering: отображение анимации загрузки изображения с правильным соотношением сторон

0 голосов
/ 25 мая 2020

Я хочу создать анимацию загрузки для тега изображения в качестве компонента реакции. Итак, я создал компонент, который берет стандартные реквизиты из тега html img, но показывает анимацию загрузки, пока изображение не будет полностью загружено.

Это выглядит примерно так: 

import React, { useState } from 'react';

export const Image = ({ src, ...rest }) => {
    const [isLoading, setIsLoading] = useState(true)

    return (
        <div className="image">
            <img
                className='image--img'
                src={src}
                onLoad={() => setIsLoading(false)}
            />
            {isLoading && <div className="image--loading-animation" />}
        </div>
    );
};

Итак, «image - loading-animation» имеет анимацию загрузки с чистым CSS.

Но анимация загрузки берет полную ширину и высоту из родительского элемента. И это берет его высоту и ширину из тега img. Таким образом, если нет img, для анимации загрузки нет высоты и ширины. Пока все ясно.

У нас есть изображение на клиенте, поэтому клиент (браузер) может развернуть загрузочную анимацию в то же время, когда он начинает загружать изображение. Отлично!
Но на стороне сервера изображения не будет, потому что сервер не загружает изображение, так как это внешний ресурс. Итак, высота и ширина загрузчика равны 0, потому что изображения нет. Когда оно попадает к клиенту, изображение начинает загружаться, а тег img получает ширину и высоту. Итак, теперь загрузчик прыгает и становится видимым.

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

...