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


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

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

2.懶加載。

由於時間關系我就先為大家介紹第一種雪碧圖加載,其實雪碧圖加載就是將多張大小尺寸基本相同類型的圖片

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

用戶體驗感。這里的雪碧圖是由CssGaga拖拽生成的,這個軟件的使用就不為大家介紹了,網上很多下載地址。

操作很簡單。

話不多說直接上代碼

 

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

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

這里不做過多的解釋,注釋里都有。

再將兩張圖片都展示下

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


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM