diff --git a/src/control/content/containers/Content.js b/src/control/content/containers/Content.js index 16f0df8..46f1073 100644 --- a/src/control/content/containers/Content.js +++ b/src/control/content/containers/Content.js @@ -44,7 +44,7 @@ class Content extends Component { src => new Promise(resolve => { const image = new Image(); image.onload = () => resolve(image); - image.src = optimizeImg(src); + image.src = src; image.originalSrc = src; }) ); diff --git a/src/widget/containers/Widget.js b/src/widget/containers/Widget.js index 83d7a01..e4cedf6 100644 --- a/src/widget/containers/Widget.js +++ b/src/widget/containers/Widget.js @@ -76,38 +76,52 @@ class Widget extends Component { preload: [1, 1] }; - const galleryItems = (folderImages || images).map(img => { - const { width, height } = img; - const croppedSrc = imageLib.cropImage(img.src, { - width, - height, - disablePixelRatio: true - }); - const msrc = imageLib.cropImage(img.src, { - width: width / 2, - height: height / 2, - compression: 20, - disablePixelRatio: true + const dimensionsTestPromises = (folderImages || images).map(img => new Promise(resolve => { + if (img.width < 5 || img.height < 5) { + const image = new Image(); + image.onload = () => resolve({ width: image.naturalWidth, height: image.naturalHeight }); + image.src = img.src; + image.originalSrc = img.src; + } else { + resolve({ width: img.width, height: img.height }); + } + })) + + Promise.all(dimensionsTestPromises) + .then(dimensions => { + const galleryItems = (folderImages || images).map((img, index) => { + const { width, height } = dimensions[index] ? dimensions[index] : img; + const croppedSrc = imageLib.cropImage(img.src, { + width, + height, + disablePixelRatio: true + }); + const msrc = imageLib.cropImage(img.src, { + width: width / 2, + height: height / 2, + compression: 20, + disablePixelRatio: true + }); + + return { + src: croppedSrc, + sourceImg: img.src, + msrc, + w: width, + h: height + }; + }); + this.gallery = new PhotoSwipe(pswpEle, photoSwipeUIdefault, galleryItems, options); + this.gallery.init(); + + this.setState(() => ({ pswpOpen: true })); + + this.gallery.listen('close', () => { + spinner.hide(); + this.setState(() => ({ pswpOpen: false })); + }); + this.gallery.listen('imageLoadComplete', () => spinner.hide()); }); - - return { - src: croppedSrc, - sourceImg: img.src, - msrc, - w: width, - h: height - }; - }); - this.gallery = new PhotoSwipe(pswpEle, photoSwipeUIdefault, galleryItems, options); - this.gallery.init(); - - this.setState(() => ({ pswpOpen: true })); - - this.gallery.listen('close', () => { - spinner.hide(); - this.setState(() => ({ pswpOpen: false })); - }); - this.gallery.listen('imageLoadComplete', () => spinner.hide()); }; shareImage = () => {