Playing with images, trying to make them cacheable...

This commit is contained in:
Eric van der Vlist 2022-10-14 11:04:24 +02:00
parent 2e17dd9c8c
commit 373e5aab0c
2 changed files with 23 additions and 10 deletions

View File

@ -31,7 +31,7 @@ const Map: react.FC<MapProperties> = (props: MapProperties) => {
};
var tiledLayer: any[] = [];
tiledLayer.push(<Tile key='tile' href={fakeTile} delay={2000} />);
tiledLayer.push(<Tile key='tile' href={fakeTile} x={0} y={0} delay={2000} />);
return (
<IonContent fullscreen={true}>

View File

@ -1,12 +1,14 @@
import react, { useEffect, useState } from 'react';
import react, { useEffect, useRef, useState } from 'react';
interface TileProperties {
href: string;
x: number;
y: number;
delay?: number;
}
const Tile: react.FC<TileProperties> = (props: TileProperties) => {
const [ready, setReady] = useState(false);
const g = useRef<SVGGElement>(null);
const timeout = (ms: number) => {
return new Promise((resolve) => setTimeout(resolve, ms));
@ -16,23 +18,34 @@ const Tile: react.FC<TileProperties> = (props: TileProperties) => {
const loadImage = async () => {
console.log(`Pre loading: ${JSON.stringify(props.href)}`);
const image = new Image(256, 256);
// const image:SVGImageElement = document.createElement('image') as unknown as SVGImageElement;
// const image = new SVGImageElement();
image.loading = 'eager';
image.src = props.href;
image.setAttribute('href', props.href);
if (!image.complete) {
await image.decode();
}
if (props.delay !== undefined) {
await timeout(props.delay);
}
setReady(true);
const svgImage = document.createElementNS(
'http://www.w3.org/2000/svg',
'image'
) as unknown as SVGImageElement;
svgImage.setAttribute('width', '256');
svgImage.setAttribute('height', '256');
svgImage.setAttribute('href', props.href);
// svgImage.setAttribute('x', '0');
// svgImage.setAttribute('y', '0');
g.current?.replaceChildren(svgImage);
};
loadImage();
});
return ready ? (
<image width={256} height={256} href={props.href} x={0} y={0} />
) : (
<></>
return (
<>
<g ref={g} transform={`translate(${props.x},${props.y})`} />
</>
);
};