1. 程式人生 > >《css世界》讀書筆記二

《css世界》讀書筆記二

1.非同步載入圖片時的一些前端小技巧

       web開發的時候,為了提高載入效能以及節約寬頻費用,首屏以下的圖片就會通過滾屏載入的方式非同步載入。然後,這個即將被非同步載入的圖片為了佈局穩健、體驗良好,往往會使用一張透明的圖片佔位。實際上,這個透明的佔位圖片也是多餘的資源,我們直接:

<img>

    然後配合下面的css可以實現一樣的效果:

img{width:200px;height:150px;visibility:hidden;display:inline-block;} /*display:inline-block是為了相容firefox瀏覽器和其他瀏覽器的圖片尺寸保持一致*/

img[src]{visibolity:visible;}