一個(gè)圖片偶爾加載不出來(lái)的事故

bigdevil_s 發(fā)布于2019-08-30 15:54 / 1713人閱讀

摘要：事故詳情這周我做了一個(gè)顯示圖片的功能，出現(xiàn)一個(gè)，偶爾圖片無(wú)法顯示，只剩一個(gè)白框框?？偨Y(jié)如果你也遇到圖片偶爾加載不出來(lái)的問(wèn)題而看到我這滿篇的廢話，我對(duì)此深感抱歉和誤解。

事故詳情
這周我做了一個(gè)顯示圖片的功能，出現(xiàn)一個(gè)bug，偶爾圖片無(wú)法顯示，只剩一個(gè)白框框。天真且忙碌的我以為是網(wǎng)絡(luò)或者瀏覽器內(nèi)存不夠的原因（頁(yè)面嵌入app里面，那段時(shí)間app很抽風(fēng)），就隨他去了，反正大多數(shù)時(shí)間都是正常的。后面有時(shí)間了，我被迫（內(nèi)心覺(jué)得不是自己的原因很不情愿）去優(yōu)化這個(gè)問(wèn)題，結(jié)果啪啪！打臉。

分析：

我以為是vue（對(duì)，我用的就是vue）雙向綁定失效的問(wèn)題，結(jié)果發(fā)現(xiàn)img標(biāo)簽的src是有值的。事實(shí)證明vue是很強(qiáng)大的。

src有值為什么不能顯示呢？難道是瀏覽器的鍋？瘋魔的我都懷疑到瀏覽器上了。但是，瀏覽器的技術(shù)很成熟偉大，我要堅(jiān)信，所有的bug都只可能是我的問(wèn)題。

思前想后，我覺(jué)得偶現(xiàn)這個(gè)問(wèn)題很是問(wèn)題。解決問(wèn)題的關(guān)鍵在于知道為什么會(huì)產(chǎn)生問(wèn)題。
于是，我重復(fù)觸發(fā)這個(gè)行為，大腦飛速運(yùn)轉(zhuǎn)（夸張），終于——————------
(柯南背景音樂(lè)：當(dāng)當(dāng)~當(dāng)！當(dāng)！當(dāng)當(dāng)~當(dāng)！當(dāng)！)
觸發(fā)圖片不顯示的關(guān)鍵不是網(wǎng)絡(luò)不好加載慢的原因，恰恰相反，是網(wǎng)絡(luò)太快的原因。因?yàn)槲业捻?yè)面是有兩個(gè)子頁(yè)的，而展示圖片的那個(gè)子頁(yè)最開(kāi)始是隱藏的。且圖片需要放大縮小，所以圖片是由很多div包裹的。有個(gè)容器div是相對(duì)定位，高度設(shè)為父div的100%，然而當(dāng)時(shí)頁(yè)面沒(méi)有顯示，父div沒(méi)有高度，所以這個(gè)容器div高度為0—————————————圖片顯示不出。

震驚！
因?yàn)槲覍?duì)父組件是用vue寫(xiě)成固定高度的，而子頁(yè)面顯示時(shí)父組件也是有高度的，為什么容器div無(wú)法繼承這個(gè)？
不可能是這個(gè)原因。因?yàn)?，vue對(duì)v-show不可見(jiàn)的組件是用display:none控制的，瀏覽器對(duì)display:none后顯示的組件采用reflow的方式渲染，reflow會(huì)計(jì)算所有的結(jié)點(diǎn)幾何尺寸和位置([瀏覽器渲染原理及流程]),所以不可能子組件無(wú)法繼承父組件的高度。

所以，我把目光投向了我那個(gè)放大縮小的插件PinchZoom.JS。
哼，果然是他！這個(gè)插件的代碼很好查看，所以我迅速地定位了問(wèn)題。這個(gè)插件在初始化時(shí)會(huì)設(shè)定容器的高度，而這個(gè)高度取得是父組件的高度，而這個(gè)時(shí)候父組件沒(méi)有高度(⊙﹏⊙)b
emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
(太丟人了，我是不會(huì)告訴別人這個(gè)bug的原因的，我只會(huì)偷偷寫(xiě)在文章里。。。)

總結(jié)
如果你也遇到圖片偶爾加載不出來(lái)的問(wèn)題而看到我這滿篇的廢話，我對(duì)此深感抱歉和誤解。但我想說(shuō)，所有bug都是你的問(wèn)題（重要），不要太相信自己，解決問(wèn)題的關(guān)鍵是找到為什么會(huì)產(chǎn)生問(wèn)題（重要）
最后，感謝您的耐心。over~