微信小程序之雪碧圖(css script)

今天有朋友問我關於微信小程序中如何在不佔用大量網絡帶寬的狀況下快速加載圖片，我給他推薦了兩種方式

1.雪碧圖(css script),有過前端經驗的朋友應該都有接觸過。

2.懶加載。

因爲時間關係我就先爲你們介紹第一種雪碧圖加載，其實雪碧圖加載就是將多張大小尺寸基本相同類型的圖片

拼湊在一塊兒造成一張新的圖片，在頁面中不會一個圖片就向網絡發送一次請求，這樣會使得圖片加載緩慢，影響

用戶體驗感。這裏的雪碧圖是由CssGaga拖拽生成的，這個軟件的使用就不爲你們介紹了，網上不少下載地址。

操做很簡單。

話很少說直接上代碼

 

在當前頁面中的兩張圖片其實就只有一次網絡請求，利用css script(翻譯也就是雪碧圖)技術進行x和y軸的偏移。

達到減小網絡請求次數，更快的刷新出圖片的功能。

這裏不作過多的解釋，註釋裏都有。

再將兩張圖片都展現下

我這邊是兩張圖片同時出現的，也就是隻要個人那張雪碧圖出現，兩張圖片會同時加載出來，而不會像在網速慢的時候由上自下慢慢刷新出來。