一个图片偶尔加载不出来的事故

事故详情
这周我做了一个显示图片的功能，出现一个bug，偶尔图片无法显示，只剩一个白框框。天真且忙碌的我以为是网络或者浏览器内存不够的原因（页面嵌入app里面，那段时间app很抽风），就随他去了，反正大多数时间都是正常的。后面有时间了，我被迫（内心觉得不是自己的原因很不情愿）去优化这个问题，结果啪啪！打脸。

分析：

1. 我以为是vue（对，我用的就是vue）双向绑定失效的问题，结果发现img标签的src是有值的。事实证明vue是很强大的。
2. src有值为什么不能显示呢？难道是浏览器的锅？疯魔的我都怀疑到浏览器上了。但是，浏览器的技术很成熟伟大，我要坚信，所有的bug都只可能是我的问题。

思前想后，我觉得偶现这个问题很是问题。解决问题的关键在于知道为什么会产生问题。
于是，我重复触发这个行为，大脑飞速运转（夸张），终于——————------
(柯南背景音乐：当当~当！当！当当~当！当！)
触发图片不显示的关键不是网络不好加载慢的原因，恰恰相反，是网络太快的原因。因为我的页面是有两个子页的，而展示图片的那个子页最开始是隐藏的。且图片需要放大缩小，所以图片是由很多div包裹的。有个容器div是相对定位，高度设为父div的100%，然而当时页面没有显示，父div没有高度，所以这个容器div高度为0—————————————图片显示不出。

震惊！
因为我对父组件是用vue写成固定高度的，而子页面显示时父组件也是有高度的，为什么容器div无法继承这个？
不可能是这个原因。因为，vue对v-show不可见的组件是用display:none控制的，浏览器对display:none后显示的组件采用reflow的方式渲染，reflow会计算所有的结点几何尺寸和位置([浏览器渲染原理及流程]),所以不可能子组件无法继承父组件的高度。

所以，我把目光投向了我那个放大缩小的插件PinchZoom.JS。
哼，果然是他！这个插件的代码很好查看，所以我迅速地定位了问题。这个插件在初始化时会设定容器的高度，而这个高度取得是父组件的高度，而这个时候父组件没有高度(⊙﹏⊙)b
emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
(太丢人了，我是不会告诉别人这个bug的原因的，我只会偷偷写在文章里。。。)

总结
如果你也遇到图片偶尔加载不出来的问题而看到我这满篇的废话，我对此深感抱歉和误解。但我想说，所有bug都是你的问题（重要），不要太相信自己，解决问题的关键是找到为什么会产生问题（重要）
最后，感谢您的耐心。over~