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

kbyyd24 發布于2019-04-23 13:13 / 1429人閱讀

摘要：今天有朋友問我關于微信小程序中如何在不占用大量網絡帶寬的情況下快速加載圖片，我給他推薦了兩種方式雪碧圖有過前端經驗的朋友應該都有接觸過。這里的雪碧圖是由拖拽生成的，這個軟件的使用就不為大家介紹了，網上很多下載地址。

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

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

2.懶加載。

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

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

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

操作很簡單。

話不多說直接上代碼

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

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

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

再將兩張圖片都展示下

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

GPU云服務器云服務器微信小程序微信小程序支付微信小程序部署微信小程序搭建

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1602.html

自制，簡易仿京東微信小程序demo

摘要：學習微信小程序一段時間，自己仿照京東小程序做了幾個頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學喜歡可以加星哦其中幾個效果圖如下介紹一下事先準備的事情前期部署項目命名規范用駝峰法命名中命名用分隔，用接口中數據用分隔文件文件夾命名學習微信小程序一段時間，自己仿照京東小程序做了幾個demo頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學https://github.com...

sourcenode 2019-08-22 11:05 評論0 收藏0
自制，簡易仿京東微信小程序demo

摘要：學習微信小程序一段時間，自己仿照京東小程序做了幾個頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學喜歡可以加星哦其中幾個效果圖如下介紹一下事先準備的事情前期部署項目命名規范用駝峰法命名中命名用分隔，用接口中數據用分隔文件文件夾命名學習微信小程序一段時間，自己仿照京東小程序做了幾個demo頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學https://github.com...

shiweifu 2019-08-01 17:36 評論0 收藏0
自制，簡易仿京東微信小程序demo

摘要：學習微信小程序一段時間，自己仿照京東小程序做了幾個頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學喜歡可以加星哦其中幾個效果圖如下介紹一下事先準備的事情前期部署項目命名規范用駝峰法命名中命名用分隔，用接口中數據用分隔文件文件夾命名學習微信小程序一段時間，自己仿照京東小程序做了幾個demo頁面，分享給大家看看源碼地址，希望能幫助到有興趣的同學https://github.com...

QiuyueZhong 2019-08-29 13:27 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0