### 圖片加載閃動問題 這個問題是因為，如果圖片不固定寬高，那么瀏覽器首次加載時渲染時，會出現閃動問題，即圖片區域開始沒有高度，幾乎不占空間，但等圖像開始加載出來后，就會突然撐起高度，造成閃動情況，體驗很不友好。這個形成的原因是因為，瀏覽器加載圖片時，在圖片沒有被全部加載出來時，尤其現在png格式的圖片有交錯類型，圖片會一點一點通過網絡加載顯示出來，在沒完全加載出來時，瀏覽器不知道圖片的寬高，這就出現了閃動的情況。 怎么解決這個閃動問題，提高用戶體驗呢？ 再處理這個問題之前，先看一下，img在瀏覽器中的一些特點，屬性。 img默認是行內元素，寬高取決于圖片本身的大小，如果單一設置img的寬或者高，那么圖像會等比自適應縮小或者放大，這樣就不至于拉伸圖像，使圖像無論是縮小或者放大顯示都顯示自然。比如文字內容中常用的屬性 img { max-width:100%}，只限制最大寬，高度不用管，這樣就能獲得最好的顯示效果。 如果硬性限制圖片寬高，即同時設置寬高，如果圖片原始寬高在這個比例還好，否則看起來就會怪怪的，因為圖片被拉伸顯示了，這也堯狐疑一個問題，如果硬性限制了寬高，那么在多種屏幕下面就不能自動適配大小了。 max-width,max-height,min-width,min-height這不算硬性設置哦，這是靈活的限定，百分比也是（但同時設置寬高就不是）。 上面討論了圖片的一些特性，這些很關鍵，自適應，拉伸等特性。 1. 第一固定要顯示圖片區域的高度和寬度，這在很多情況下很實用，也是最簡單的，但是在移動端則不是那么適用了，移動端很多時候要求寬高自適應，以獲得較好的體驗，那么固定高或者寬的方式就不行了。 2. 服務端提交計算圖片的寬高，根據比例自動計算自適應的寬高，這種方法在移動端和PC端通用，很多瀑布流采取的是這種方案，但缺點是，很多時候服務端不方便計算圖片寬高，并且客戶端需要維護自適應（檢測窗口大小變化時重新計算自適應），有一定的性能開銷。 3. 使用遮罩圖片，遮罩圖片采用data-url的格式，遮罩層圖片采用和原圖一樣的比例，這樣就不會出現閃動了，并且利用的是圖片，那么還天然自帶寬高自適應屬性，這種方案在很多情況下是最簡單，最完美的解決方案。 4. 如果情況太復雜，實在難以解決，那么可以考慮加一個遮罩層了，等關鍵圖片加載后在關閉遮罩層。 * * * * * ### 擴展 討論圖片加載的問題，要先看看瀏覽器是怎么加載資源的 當我們在文檔底部這樣寫代碼時就會發現，頁面上的圖片先沒有顯示，而是彈出后，點擊確定了才會再顯示圖片，并且從瀏覽器資源加載哪里可以看到，最先加載的是文檔文件，然后是JS，CSS，最后才是加載圖片文件，但是有一個細節需要注意，此時圖片資源的加載狀態為pending，而其他文件，即使是在最后的ready代碼的后面，在彈出前也是pending狀態，也就是說 > 頁面加載完成有兩種事件，一是ready，表示文檔結構已經加載完成（不包含圖片等非文字媒體文件），二是onload，指示頁 面包含圖片等文件在內的所有元素都加載完成。(可以說：ready 在onload 前加載！！！) 所以ready圖片之后圖片才開始加載，圖片加載完成前沒有高度，所以才會出現閃動。要解決這個問題就只有在圖片加載之前“固定”圖片的高度，那就是在ready實現（雖然此時圖片還沒加載，但是可以對它的文檔節點進行控制），這樣就能避免出現閃動了，這就是幻燈插件的原理能夠做到不出現閃動的原理，不然幻燈這么重要的東西如果出現閃動那么體驗就差了，當然這也是給幻燈區域固定了一個比例的，所以用于幻燈的圖片最還還是要滿足這個比例，不然會有被拉伸的丑效果。 也就是瀏覽器先一點點加載文檔，并從上到下解析，圖片加載不是在解析時就加載的，是在文檔解析后再加載的。所以圖片會出現閃動的效果。 ~~~ jQuery(document).ready(function($) { alert(1); }); ~~~ * * * * * ### 參考 - [為什么圖片一定要設置width和height？一定要了解的！](https://www.toutiao.com/a6512639093237613063/?tt_from=weixin&utm_campaign=client_share&timestamp=1516476429&app=news_article&utm_source=weixin&iid=22069500288&utm_medium=toutiao_android&wxshare_count=1) - [JQuery-- onload，ready方法詳細解說](http://blog.csdn.net/dreamzml/article/details/8859026) - [事件DOMContentLoaded和load的區別](http://www.jianshu.com/p/d851db5f2f30) - [一款支持觸屏的響應式帶左右按鈕的焦點圖插件royalslider](http://www.juheweb.com/index.php?m=content&c=index&a=demo&catid=34&id=43) - [瀏覽器加載初探](http://www.hmoore.net/xiak/quanduan/245636) - [延遲加載(Lazyload)三種實現方式](https://segmentfault.com/p/1210000008540989) - [占位圖](https://fakeimg.pl/) -[在瀏覽器未加載圖片之前獲取圖片寬高？](https://segmentfault.com/q/1010000007010435) - [漸進式 jpg 和 交錯式 gif png 提高圖片站體驗](http://www.cnblogs.com/liyulong1982/articles/2465430.html) - [Javascript圖片預加載詳解](http://blog.csdn.net/yisuowushinian/article/details/46227115) - [談談 javascript 圖片預加載技術 (比onload更快獲取圖片尺寸) - Sub的個人頁面](https://my.oschina.net/sub/blog/132524) - [Photoshop 保存PNG格式交錯和不交錯有什么差別。](https://zhidao.baidu.com/question/375318805.html) - [ js在onload事件前獲取圖片的寬高，js盡快獲取圖片的寬高](http://blog.csdn.net/kongjiea/article/details/42969377) - [jpg、png、gif圖片格式有啥區別？哪種格式保存大姐姐效果最好？](https://www.ixigua.com/a6488962387490636301/?utm_source=toutiao&utm_medium=feed_stream#mid=5215393986) - [用 imgproxy 自動縮放圖片](https://mp.weixin.qq.com/s/25Pt37Xe9_MdyJEX4Lm0eg) - [原生 JS 實現最簡單的圖片懶加載](https://mp.weixin.qq.com/s/yP5nwH6hpPh1uPgRtSET8A) - [\[譯\] 大型網站前端使用圖片格式的正確姿勢](https://mp.weixin.qq.com/s/7AI5QXlTG50k-qlIQSxcQA) [圖片加載時使用 SVG 作為圖片 placehold](http://mp.weixin.qq.com/s/O9iqxlqJpbLePMO5rW2QCg) [“懶”的妙用——淺析圖片懶加載技術](http://mp.weixin.qq.com/s/637uFy-l9MnbMFvFMkBXFQ) > 提高性能：防抖，節流 [預加載系列二：讓File Prefetching絲絲潤滑無痛無癢 - Delai - 有贊技術團隊](https://tech.youzan.com/file-frefetching/) > ……對預加載的js文件只下載不執行…… * * * * * [Web圖片資源的加載與渲染時機 - Leechikit的專欄 - SegmentFault](https://segmentfault.com/a/1190000010032501?v=2017070401) >[danger] 深入理解瀏覽器對圖片等資源的加載時機 [淺談Web圖像優化](http://mp.weixin.qq.com/s/kg0nOP878OsGjSE06qtF8g) [SVG 揚帆起航](http://mp.weixin.qq.com/s/OnEcYptGePlWIztXXiaHGQ) [手摸手，帶你優雅的使用 icon](http://mp.weixin.qq.com/s/KKYMXdilTXXoaM3bmBKKcA) [圖片加載時使用 SVG 作為圖片 placehold](http://mp.weixin.qq.com/s/O9iqxlqJpbLePMO5rW2QCg) [了解這些，你也能成為SVG大觸！](https://mp.weixin.qq.com/s/xRssr8J87sMBfofhLlBP3A) [SVG圖案:通過圖片、屬性和嵌套構建更復雜的圖案_SVG 教程_w3cplus](https://www.w3cplus.com/svg/svg-pattern-attributes.html) [Ionicons: The premium icon pack for Ionic Framework](https://ionicons.com/usage/) ~~~ Using the Web Component The Iconicons Web Component is an easy and performant way to use Ionicons in your app. The component will dynamically load an SVG for each icon, so your app is only requesting the icons that you need. Also note that only visible icons are loaded, and icons which are "below the fold" and hidden from the user's view do not make fetch requests for the svg resource. ---- 使用Web組件 Iconicons Web組件是一個簡單高效的方法在你的應用中使用Ionicons。組件將動態地加載一個SVG對于每一個圖標,這樣你的應用程序僅僅是請求需要的圖標。 　　 　　 還要注意,只可見加載圖標,圖標“折以下”和隱藏從用戶的觀點不讓svg獲取請求的資源。 ~~~ * * * * * - [瀏覽器的工作原理：現代網絡瀏覽器幕后揭秘](http://blog.sina.com.cn/s/blog_6deafdb2010146bt.html) - [瀏覽器渲染的那些事(一) - 前端開發之從入門到放棄 - SegmentFault](https://segmentfault.com/a/1190000005169412) - [體驗更好的過渡效果](http://www.orzpoint.com/better-loading-experience/) ``` 處理腳本和樣式表的順序 腳本 　　網絡的模型是同步的。網頁作者希望解析器遇到 <script> 標記時立即解析并執行腳本。文檔的解析將停止，直到腳本執行完畢。如果腳本是外部的，那么解析過程會停止，直到從網絡同步抓取資源完成后再繼續。此模型已經使用了多年，也在 HTML4 和 HTML5 規范中進行了指定。作者也可以將腳本標注為“defer”，這樣它就不會停止文檔解析，而是等到解析結束才執行。HTML5 增加了一個選項，可將腳本標記為異步，以便由其他線程解析和執行。 預解析 　　Webkit 和 Firefox 都進行了這項優化。在執行腳本時，其他線程會解析文檔的其余部分，找出并加載需要通過網絡加載的其他資源。通過這種方式，資源可以在并行連接上加載，從而提高總體速度。請注意，預解析器不會修改 DOM 樹，而是將這項工作交由主解析器處理；預解析器只會解析外部資源（例如外部腳本、樣式表和圖片）的引用。 樣式表 　　另一方面，樣式表有著不同的模型。理論上來說，應用樣式表不會更改 DOM 樹，因此似乎沒有必要等待樣式表并停止文檔解析。但這涉及到一個問題，就是腳本在文檔解析階段會請求樣式信息。如果當時還沒有加載和解析樣式，腳本就會獲得錯誤的回復，這樣顯然會產生很多問題。這看上去是一個非典型案例，但事實上非常普遍。Firefox 在樣式表加載和解析的過程中，會禁止所有腳本。而對于 Webkit 而言，僅當腳本嘗試訪問的樣式屬性可能受尚未加載的樣式表影響時，它才會禁止該腳本。 ``` - [前端文摘：深入解析瀏覽器的幕后工作原理 - 夢想天空（山邊小溪） - 博客園](http://www.cnblogs.com/lhb25/p/how-browsers-work.html#Webkit_CSS_parser) ~~~ 總之這不是個簡單的問題，涉及到圖片這個特殊的元素，還有瀏覽器的加載渲染知識，必須對瀏覽器的加載渲染過程有深入了解才行，任重而道遠。 圖片還有交錯式的，漸進式的，所以關于網頁中圖片加載顯示，不是個簡單的問題，比如圖片加載為什么總是一點一點顯示出來，為什么直到完全加載顯示完畢后才能獲取到圖片的寬高，**在沒加載完畢前不知道圖片的寬高**，這給前端帶來了很多麻煩，使得閃動問題不好解決，使得改善用戶體驗任重道遠，需要前后端一起配合，比如瀑布流中還需要后端預先計算好圖片的寬高比例等，這使得解決這些問題變得復雜。 （上面一些實踐，也只是通過一些手段，**盡快的獲取圖片的寬高**，**并沒有打破在圖片加載前不能夠獲取圖片的寬高的魔咒**，如果 不預先制定img的寬高，瀏覽器在渲染時是沒有寬高的，所以是不可能解決閃動問題的，盡快也只是很快，讓閃動發生很快，以不讓我們感受到，但這不是從根本上解決問題，只是自欺欺人而已，如果網速本就很慢就更不用說了，所以要從根本上解決問題，就必須預先定義寬高，要么是固定的，要么是服務器返回的。由此帶來的問題就是圖片可能會被拉伸，或者服務端處理太麻煩，總之要完美解決這個問題，只能前后端共同努力一起克服困難才行。） ~~~ [網頁圖片加載優化方案](https://zhuanlan.zhihu.com/p/33370207?group_id=942455391263666176) * * * * * ### 響應式/長寬比+無閃動方案 占位圖 `data:image/jpg;base64` 的這種響應式+無閃動方案（原理，1. 圖片天然的寬高等比縮放特性做響應式；2. `data` 模式無網絡加載，從根本上解決圖片不固定寬高加載時閃動問題） 用 `css3` 計算函數 `calc()` 也可以做到，保持高度和寬度的比例就可以。**但問題是，calc無法獲得元素的寬，也就無法保持比例設置高。**好在有一些hack手段可以做到，要知道內外邊距的百分比就是以元素的寬為比例的，利用這個特性我們還真能實現保持長寬比，參見：[CSS實現長寬比的幾種方案_CSS3 教程_w3cplus](https://www.w3cplus.com/css/aspect-ratio.html) 根本問題是因為，在圖片加載完成前無法得知寬高（不靠后端獲取圖片信息的情況），而瀏覽器繪制不會因圖片加載而阻塞，所以繪制圖片時是沒有高度和寬度的。 [生成微縮圖 · php筆記 · 看云](http://www.hmoore.net/xiak/php-node/248832) [閑談web圖片服務器 | DBA notes](http://dbanotes.net/web/web_image_server.html) [yupoo!的網站技術架構 | DBA notes](http://dbanotes.net/arch/yupoo_arch.html) * * * * * [“懶”的妙用——淺析圖片懶加載技術](https://mp.weixin.qq.com/s/Syqoz_Hkh7JY4GYIu_TE3A) * * * * * update：2018-2-14 18:37:13