关于photoswipe的data-size问题-自适应宽高

photoswipe是一款非常优秀的移动端图片查看插件，但是在使用的时候，有一个令人头疼的问题，（data-size）！

这个属性必须填写，且值需固定。这对我们来说是一个非常麻烦的问题，为了解决这个问题，我上网搜了很多解决方案，但是给出的解决方案都无法获取到图片的宽高（数据加载使用的是异步加载）。

最后我在photoswipe的官网上找到了解决方案。（github讨论区内）

在openPhotoSwipe函数内，对PhotoSwipe有一个实例，正常的写法是：

gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.init();

我看到有大神在讨论区内对这个实例进行了补充：

gallery = new PhotoSwipe( pswpElement, PhotoSwipeUI_Default, items, options);
gallery.listen('imageLoadComplete', function(index, item) {
    var linkEl = item.el.children[0];
    var img = item.container.children[0];
    if (!linkEl.getAttribute('data-size')) {
        linkEl.setAttribute('data-size', img.naturalWidth + 'x' + img.naturalHeight);
        item.w = img.naturalWidth;
        item.h = img.naturalHeight;
        gallery.invalidateCurrItems();
        gallery.updateSize(true);
    }
});
gallery.init();

添加了这些代码后，我在经过尝试之后，发现点击的第一次真的是自适应宽高，但是第二次进去图片轮播进行点击的时候，发现还是固定的宽高。

<div class="layui-upload-list upload-img-list my-gallery" data-pswp-uid="1" id="img-gallery">
    <figure v-for="(i,index) in imgArr" class="imgBox">
        <div class=" img-dv" @click="openCarousel(index)">
            <a class="layui-upload-img" :href="'../'+i" data-size="1980x1080" :data-med="'../'+i" >
                <img class="layui-upload-img" :src="'../'+i">
            </a>
        </div>
    </figure>
</div>

上面是我的代码结构。经过调试，发现在上面补充的代码是将data-size这个属性加到了a标签外面的div内。但是又不能删除a标签内的data-size属性，为了解决这个错误，我在一开始判断size的时候，对其进行了判断。

if(divEl.getAttribute('data-size')) {
    size = divEl.getAttribute('data-size').split('x');
}else {
    size = linkEl.getAttribute('data-size').split('x');
}

这样就解决问题啦！

但是还存在一个问题就是在第一次进轮播图的时候会有闪烁，希望有大神可以优化这个问题。

希望可以帮到大家。如果有不懂的地方，大家可以给我留言。