微信端网页中图片的展示方式

一、微信端网页中图片的展示方式

　　微信端网页中图片有两种展示方式：平铺与图集。平铺的时候文档内的所有图片全部展开，点击图片则放大。图集的时候只展示一张图片，点击图片的时候以翻页的方式展示一组图片。实现原理对于如下一个图片标签,data-gid用于存放组标识，同一组的data-gid相同。data-index用于存放组中图片的展示顺序，不能相同。onclick中根据data-src处理图片展示。对于图集就只显示一张其他的img设置为隐藏，src与第一个图片一样，或者为空，这样可以减少网页的加载量，提高访问效率。data-src保存图片的真正访问路径。

二、图集的实现　

这里定义了两组图片组，在微信段查看就可正常运行。在普通浏览器中点击图片会提示使用微信查看。

　　如果使用了iframe，需要iframe中的图片也能达到这样的效果，就需要修改showImg函数，修改后的函数如下：