Cocos Creator從1.0版本釋出到現在也有一年多了，按理說一些常見的問題網上都有解決方案，例如"如何自定義首頁載入進度條介面"這種普遍需求，應該所有人都會遇到的，因此也有完善的解決方案才對。我在網上搜了一些文章，雖然也有討論的帖子，但是方案都不盡人意。因此只能再次自己動手豐衣足食了，在此我總結一下我的思路和策略，分享給大家，希望後來的人少走彎路，另外這裡的方案只針對H5遊戲釋出，其他平臺可以借鑑思路自己實現。
首頁載入的loading介面，官網的文件並沒有提及，我是通過構建釋出後的程式碼分析的。我的另一篇文章《Cocos Creator—優化首頁開啟速度》也講過Cocos Creator載入的策略，有興趣可以參考。其實Cocos的載入策略很簡單，main.js作為載入邏輯和style-mobile.css實現載入ui，但是比較坑的是這兩個檔案並沒有通過工程檔案暴露出來，你只能在Cocos Creator的安裝目錄裡面扒出原始碼，網上有些解決方案是直接修改這兩個原始檔，是可以達到目的，但有兩個弊端：
不利於Cocos Creator的更新，每次升級Cocos Creator到新版本，你都需要從新修改一次
不利於團隊協作，團隊每個人都需要修改一遍Cocos Creator安裝檔案
這個方案一看就不靠譜，其實要徹底解決這個問題很簡單，讓Cocos Creator開發組把這兩個檔案暴露到工程裡面就行了，但不知道為什麼這麼久還沒有實現。
所以我的方案就是做開發組還沒有做的事情，自己把這兩個檔案暴露到工程上，雖然不完美，但能避免上面兩個問題。這個方案能實現以下功能：
可以在專案工程下面完美自定義loading介面
能動態把自定義的loading介面程式碼注入到構建釋出後的最終線上程式碼
能在不修改原始碼的條件下，通過覆蓋程式碼的方式實現自己的首頁載入介面
這個方案好處在於即使Cocos Creator升級，也不影響工程的正常工作和釋出。當也不是很完美，例如Cocos Creator開發組把載入邏輯全改了，我們還是需要調整程式碼，但這個機率比較小，就算出現了，調整起來還是比較快捷的。
方案具體策略如下：
在工程目錄還原最終首頁載入程式碼。在工程根目錄新建html資料夾，手動把build/web-mobile/原始檔裡面的style-mobile.css，main.js，splash.png複製到html資料夾，新建loading.html檔案，body標籤的結構保持跟最終構建生成的index.html結構一致。
定製自己的UI和載入邏輯。新建loading.css，新建loading.js，在loading.css實現新的載入介面UI，在loading.js上實現新增的載入邏輯，如果不需要，loading.js可以忽略不加。
通過gulp等構建工具，動態把loading.css合併到build/web-mobile/style-mobile.css，把loading.js合併到build/web-mobile/main.js。
步驟1是為了方便開發的UI能正常覆蓋原有的loading介面。如果Cocos Creator升級對相關的載入邏輯做了大幅度更新，影響最終的覆蓋，可以手動同步一下style-mobile.css，main.js的程式碼到最新。
gulp安裝請訪問：https://gulpjs.com/
nodejs安裝請訪問：http://nodejs.org/
另外需要安裝gulp相關外掛：gulp-concat
gulpfile檔案程式碼：
gulp.task('concat-css', function(cb) {
gulp.src(['./build/web-mobile/style-mobile.css', './html/loading.css'])
.pipe(concat('style-mobile.css'))
.pipe(gulp.dest('./build/web-mobile/')
.on('end', cb));
});由於我沒有對main.js修改的需求，所以我這裡只做了css的實現，有興趣的同學可以自己實現js的自定義邏輯。其實思路很簡單，但挺實用的。
完整程式碼可以訪問：https://github.com/babyzone20...，這個示例包含了Cocos Creator圖片壓縮優化，減少首次檔案請求，html壓縮，動態更新定製loading圖等功能哦。
ps：
我們團隊正在招聘優秀的H5遊戲開發工程師，如果你符合以下條件：
白鷺引擎/Cocos2d-js/Layabox等H5相關的開發經驗
熱愛遊戲，希望快速成長，不甘平庸
請聯絡我吧：babyzone2004@qq.com