muerwre/vault-frontend
1
0
Fork 0
mirror of https://github.com/muerwre/vault-frontend.git synced 2025-04-28 14:16:41 +07:00
Code Packages Activity Actions

smouth image loading

Browse source
This commit is contained in:
muerwre 2019-08-25 17:56:03 +07:00
parent e1a9dd66fc
commit 6f90115d3b
5 changed files with 48 additions and 30 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/components/node/NodeImageBlock/index.tsx
View file

@ -14,7 +14,6 @@ import { INode } from '~/redux/types';
import classNames from 'classnames';
import { getImageSize } from '~/utils/dom';
import { UPLOAD_TYPES } from '~/redux/uploads/constants';
import { readFileSync } from 'fs';
interface IProps {
is_loading: boolean;
@ -23,7 +22,7 @@ interface IProps {
const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
const [current, setCurrent] = useState(0);
const [height, setHeight] = useState(0);
const [height, setHeight] = useState(320);
const [loaded, setLoaded] = useState<Record<number, boolean>>({});
const refs = useRef<Record<number, HTMLDivElement>>({});
@ -40,7 +39,9 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
]);
useEffect(() => {
if (!refs || !refs.current[current]) return;
console.log({ height });
if (!refs || !refs.current[current] || !loaded[current]) return setHeight(320);
const el = refs.current[current];
@ -51,31 +52,36 @@ const NodeImageBlock: FC<IProps> = ({ node, is_loading }) => {
return (
<div className={classNames(styles.wrap, { is_loading })}>
{!is_loading && (
<div>
<ImageSwitcher total={images.length} current={current} onChange={setCurrent} />
<div>
<ImageSwitcher
total={images.length}
current={current}
onChange={setCurrent}
loaded={loaded}
/>
<div className={styles.image_container} style={{ height }}>
{images.map((file, index) => (
<div
className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index],
})}
ref={setRef(index)}
<div className={styles.image_container} style={{ height }}>
{(is_loading || !loaded[0] || !images.length) && <div className={styles.placeholder} />}
{images.map((file, index) => (
<div
className={classNames(styles.image_wrap, {
is_active: index === current && loaded[index],
})}
ref={setRef(index)}
key={file.id}
>
<img
className={styles.image}
src={getImageSize(file.url, 'node')}
alt=""
key={file.id}
>
<img
className={styles.image}
src={getImageSize(file.url, 'node')}
alt=""
key={file.id}
onLoad={onImageLoad(index)}
/>
</div>
))}
</div>
onLoad={onImageLoad(index)}
/>
</div>
))}
</div>
)}
</div>
</div>
);
};