TheSnegok
@TheSnegok

Как оптимизировать визуализацию анимированных картинок?

Здраствуйте, столкнулся с проблемой оптимизации большого количества .webp на странице, думал может рендерится что-то постоянно, но нет, вот мой тестовый сайт:
тык
При открытии работает нормально, а вот при визуализации изображений подтормаживает, вот код вывода самих изображений:
const Image = React.memo((props) => {
	let gif = props.gif;

	const [loader, setLoader] = useState(false);

	let clickCopy = (elem) => {
		navigator.clipboard.writeText(elem);
	};

	const loadImage = () => {
		setLoader(true);
	};

	return (
		<div className={s.wrapper} key={gif.id}>
			<div
				className={s.image}
				data-title="Нажмите чтобы скопировать ссылку на изображение"
			>
				<picture>
					<source type="image/webp" />
					<img
						src={gif.images.original.webp}
						alt={gif.slug}
						key={gif.id}
						className={!loader ? s.gifNone : s.gif}
						onClick={() => clickCopy(gif.images.original.url)}
						onLoad={() => loadImage()}
						crossOrigin="anonymous"
						width="361"
						height="203"
					/>
				</picture>
			</div>

			{!loader && <div className={s.loader}></div>}
		</div>
	);
});
  • Вопрос задан
  • 111 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы