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

fixed image preloading

Browse source
This commit is contained in:
Fedor Katurov 2020-04-21 16:12:29 +07:00
parent 42bb303394
commit 1e4081b86e
2 changed files with 6 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/containers/dialogs/PhotoSwipe/index.tsx
View file

@ -26,27 +26,19 @@ type Props = ReturnType<typeof mapStateToProps> & typeof mapDispatchToProps & {}
const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => { const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
let ref = useRef<HTMLDivElement>(null); let ref = useRef<HTMLDivElement>(null);
const items = useMemo(
() =>
photoswipe.images.map(image => ({
src: getURL(image, window.innerWidth < 768 ? PRESETS[900] : PRESETS[1600]),
})),
[photoswipe.images]
);
const closeModal = useCallback(() => modalSetShown(false), [modalSetShown]); const closeModal = useCallback(() => modalSetShown(false), [modalSetShown]);
useEffect(() => { useEffect(() => {
new Promise(async resolve => { new Promise(async resolve => {
const images = await Promise.all( const images = await Promise.all(
items.map( photoswipe.images.map(
item => image =>
new Promise(resolveImage => { new Promise(resolveImage => {
const img = new Image(); const img = new Image();
img.onload = () => { img.onload = () => {
resolveImage({ resolveImage({
src: item.src, src: getURL(image, window.innerWidth < 768 ? PRESETS[900] : PRESETS[1600]),
h: img.naturalHeight, h: img.naturalHeight,
w: img.naturalWidth, w: img.naturalWidth,
}); });
@ -56,7 +48,7 @@ const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
resolveImage({}); resolveImage({});
}; };
img.src = item.src; img.src = getURL(image, PRESETS[1600]);
}) })
) )
); );
@ -73,7 +65,7 @@ const PhotoSwipeUnconnected: FC<Props> = ({ photoswipe, modalSetShown }) => {
ps.listen('destroy', closeModal); ps.listen('destroy', closeModal);
ps.listen('close', closeModal); ps.listen('close', closeModal);
}); });
}, [items, photoswipe.index]); }, [photoswipe.images, photoswipe.index]);
return ( return (
<div className="pswp" tabIndex={-1} role="dialog" aria-hidden="true" ref={ref}> <div className="pswp" tabIndex={-1} role="dialog" aria-hidden="true" ref={ref}>

2
src/containers/dialogs/PhotoSwipe/styles.scss
View file

@ -1,5 +1,5 @@
.bg { .bg {
background-color: transparent; background-color: transparent !important;
} }
.bar { .bar {