資訊專欄INFORMATION COLUMN
摘要：事故詳情這周我做了一個顯示圖片的功能，出現(xiàn)一個，偶爾圖片無法顯示，只剩一個白框框。總結(jié)如果你也遇到圖片偶爾加載不出來的問題而看到我這滿篇的廢話，我對此深感抱歉和誤解。
事故詳情
這周我做了一個顯示圖片的功能，出現(xiàn)一個bug，偶爾圖片無法顯示，只剩一個白框框。天真且忙碌的我以為是網(wǎng)絡(luò)或者瀏覽器內(nèi)存不夠的原因（頁面嵌入app里面，那段時間app很抽風），就隨他去了，反正大多數(shù)時間都是正常的。后面有時間了，我被迫（內(nèi)心覺得不是自己的原因很不情愿）去優(yōu)化這個問題，結(jié)果啪啪！打臉。
分析：
我以為是vue（對，我用的就是vue）雙向綁定失效的問題，結(jié)果發(fā)現(xiàn)img標簽的src是有值的。事實證明vue是很強大的。
src有值為什么不能顯示呢？難道是瀏覽器的鍋？瘋魔的我都懷疑到瀏覽器上了。但是，瀏覽器的技術(shù)很成熟偉大，我要堅信，所有的bug都只可能是我的問題。
思前想后，我覺得偶現(xiàn)這個問題很是問題。解決問題的關(guān)鍵在于知道為什么會產(chǎn)生問題。
于是，我重復觸發(fā)這個行為，大腦飛速運轉(zhuǎn)（夸張），終于——————------
(柯南背景音樂：當當~當！當！當當~當！當！)
觸發(fā)圖片不顯示的關(guān)鍵不是網(wǎng)絡(luò)不好加載慢的原因，恰恰相反，是網(wǎng)絡(luò)太快的原因。因為我的頁面是有兩個子頁的，而展示圖片的那個子頁最開始是隱藏的。且圖片需要放大縮小，所以圖片是由很多div包裹的。有個容器div是相對定位，高度設(shè)為父div的100%，然而當時頁面沒有顯示，父div沒有高度，所以這個容器div高度為0—————————————圖片顯示不出。
震驚！
因為我對父組件是用vue寫成固定高度的，而子頁面顯示時父組件也是有高度的，為什么容器div無法繼承這個？
不可能是這個原因。因為，vue對v-show不可見的組件是用display:none控制的，瀏覽器對display:none后顯示的組件采用reflow的方式渲染，reflow會計算所有的結(jié)點幾何尺寸和位置([瀏覽器渲染原理及流程]),所以不可能子組件無法繼承父組件的高度。
所以，我把目光投向了我那個放大縮小的插件PinchZoom.JS。
哼，果然是他！這個插件的代碼很好查看，所以我迅速地定位了問題。這個插件在初始化時會設(shè)定容器的高度，而這個高度取得是父組件的高度，而這個時候父組件沒有高度(⊙﹏⊙)b
emmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmmm
(太丟人了，我是不會告訴別人這個bug的原因的，我只會偷偷寫在文章里。。。)
總結(jié)
如果你也遇到圖片偶爾加載不出來的問題而看到我這滿篇的廢話，我對此深感抱歉和誤解。但我想說，所有bug都是你的問題（重要），不要太相信自己，解決問題的關(guān)鍵是找到為什么會產(chǎn)生問題（重要）
最后，感謝您的耐心。over~
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/53422.html
摘要：事故詳情這周我做了一個顯示圖片的功能，出現(xiàn)一個，偶爾圖片無法顯示，只剩一個白框框?？偨Y(jié)如果你也遇到圖片偶爾加載不出來的問題而看到我這滿篇的廢話，我對此深感抱歉和誤解。 事故詳情這周我做了一個顯示圖片的功能，出現(xiàn)一個bug，偶爾圖片無法顯示，只剩一個白框框。天真且忙碌的我以為是網(wǎng)絡(luò)或者瀏覽器內(nèi)存不夠的原因（頁面嵌入app里面，那段時間app很抽風），就隨他去了，反正大多數(shù)時間都是正常的。...
摘要：若攔截事件返回為，表示攔截，事件不會向下層的或者傳遞，表示不攔截，繼續(xù)分發(fā)事件。五注冊反注冊未成對使用引起的內(nèi)存泄漏。七集合對象沒有及時清理引起的內(nèi)存泄漏。 原文鏈接：https://blog.csdn.net/wen_hah... 版權(quán)聲明：本文為博主原創(chuàng)文章，轉(zhuǎn)載請附上博文鏈接！ 前言 金三銀四到來了，找工作的好時候到了，小伙伴們是不是都在忙著找工作呢，小弟前一陣也是忙著在找工作，...
摘要：發(fā)現(xiàn)分析資源文件的過程中，發(fā)現(xiàn)了一個數(shù)據(jù)庫。激活碼明碼保存。激活碼的發(fā)布和驗證分開激活碼的發(fā)布由項目負責將激活碼明文交由發(fā)布渠道，如印刷或其他銷售渠道。這樣即使激活碼數(shù)據(jù)庫被泄露也不怕其用來被激活。 本文隱去了公司名、人名、應用名、以及應用特征等敏感信息。 本文作者@CuGBabyBeaR 0、背景和事先分析 前段時間看見一個能夠和現(xiàn)實進行交互的應用，覺得挺有意思，恰巧有一個下午...
摘要：美國金融行業(yè)監(jiān)管局有的重要應用目前正運行于亞馬遜云端服務(wù)上面，其中包括市場監(jiān)測應用，每年因此節(jié)省萬美元的費用。穆林斯負責與金融企業(yè)達成新的云服務(wù)協(xié)議。 配圖：安全性不再是云服務(wù)客戶最擔心的事情北京時間3月19日消息，路透社今天撰文指出，對于美國金融公司而言，使用共享云服務(wù)的益處是顯而易見的。市場研究公司IDC預計，得益于云服務(wù)，到2019年全球較大幾家銀行將節(jié)省150億美元的龐大資金，技術(shù)基...
摘要：在這里我們可以從一個科技工作者口中了解到一個這樣的事實互聯(lián)網(wǎng)與人工智能在當今世界科技格局中，中國和美國是兩國獨大。同樣，人工智能的發(fā)展離不開數(shù)據(jù)標注，數(shù)據(jù)標注在人工智能的高速路上，作為基石，成為了眾多重要環(huán)節(jié)之中的重中之重。 中國科學技術(shù)大學博士袁嵐峰在不久前的文章中把中國科技在世界的地位大致分為五類。 我們本文中只引用第四類 如今世界科技的第四個格局：雙頭格局，一般是中美兩國遠遠高于...
閱讀 1616·2021-11-23 09:51
閱讀 1185·2019-08-30 13:57
閱讀 2268·2019-08-29 13:12
閱讀 2020·2019-08-26 13:57
閱讀 1205·2019-08-26 11:32
閱讀 983·2019-08-23 15:08
閱讀 710·2019-08-23 14:42
閱讀 3091·2019-08-23 11:41
