網頁效能最佳化 — image spritesheet

Milk Midi
Milk Midi
Aug 19, 2019 · 2 min read

大家好,我是奶綠茶

網頁效能最佳化這個題目很大,今天就針對圖片這個主題來講解。

為了減少網頁 request 次數,會把多張圖片拼成一張,
有許多線上服務有提供這樣的功能,
身為工程師,當然要用 Code 跑呀
奶綠我使用的是 gulp spritesmith 套件
https://www.npmjs.com/package/gulp.spritesmith

設定好後,自動拼成一張圖片 + css ,是不是很方便。

問題來了:

如果我想要其中一張圖片,也能夠隨 div 寬度 100 縮放呢?
這時就需要手動的新增 css template 讓 gulp.spritesmith 使用
再加一點點的數學。

live demo:
https://milkmidi.github.io/gulp_spritesmith_example/

gulp.spritesmith template 是使用 handlebar 格式
所以我們可以自定任意的函數

gulp.js 針對 handlebar 寫一個函式cssHandlebarsHelpers: {
bgPosition(spriteSize, imgSize, offset) {
const result = (offset / (imgSize - spriteSize)) * 100;
if (Number.isNaN(result)) {
return '0';
}
return `${result}%`;
}

就完成啦。

github:
https://github.com/milkmidi/gulp_spritesmith_example

祝大家學習愉快。

More From Medium

Also tagged JavaScript

Also tagged JavaScript

Redux State Management With Types

Apr 6 · 9 min read

50

Related reads

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade