鍍金池/ 問答/HTML5  HTML/ pc網(wǎng)站層 圖片的優(yōu)化

pc網(wǎng)站層 圖片的優(yōu)化

在網(wǎng)站層上運用到了banner圖片的滾動（使用了background-image） 現(xiàn)在有個問題是網(wǎng)站層的banner有點多 在加載的時候總是先加載圖片（圖片在200k以內(nèi)） 導致了一些核心的js加載慢。有優(yōu)化的方法嗎？

回答
編輯回答
嫑吢丕

1.圖片懶加載

把background-image設置為空或弄張占位圖片
給每張圖片添加個attr，比如data-original存圖片鏈接
banner每次觸發(fā)滾動將background-image替換為data-original即可

2.用CDN加速

2017年12月25日 22:03
編輯回答
敢試

1,合成雪碧圖，通過background-position 控制
2,換成 img 標簽，在展示第一張banner之前，指定第一張圖片的src，需要展示第二張banner之前指定第二張圖片的src，然后在img的onload事件中切換banner

2017年3月26日 05:52
編輯回答
網(wǎng)妓

一開始banner只放第一張顯示的圖，在第一張顯示的圖加載好了之后，在用js向banner添加其他其他的圖并加載

2018年3月8日 11:46