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

kbyyd24 發(fā)布于2019-04-23 13:13 / 1470人閱讀

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

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

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

2.懶加載。

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

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

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

操作很簡單。

話不多說直接上代碼

在當(dāng)前頁面中的兩張圖片其實就只有一次網(wǎng)絡(luò)請求，利用css script(翻譯也就是雪碧圖)技術(shù)進(jìn)行x和y軸的偏移。

達(dá)到減少網(wǎng)絡(luò)請求次數(shù)，更快的刷新出圖片的功能。

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

再將兩張圖片都展示下

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

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/1602.html

相關(guān)文章

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

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

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

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

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

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

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

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

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

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

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