Change default qici loader(Only applicable to the latest version 1.1.0)

At present QICI engine provides three built-in start loading interfaces, they are eating beans, progress bar interface and static background figure interface, here in the following we will talk about each start loading interface implementation:

1、Eating beans loading interface, shown as below,


This interface is the default engine loading interface, we only need to set the value of qici.config.loadingHandler to be "svgHandler" in the HTML file,shown as the red arrow marks below,


2、Using the progress bar loading interface,shown as below,


As the same we set the value of qici.config.loadingHandler to be “progressHandler” in Html file.

3、Using the static background figure loading interface,shown as below,


As the same we also just need to set the value of qici.config.loadingHandler,for the background we can set the backgroundStyle to be CSS type string in the qici.config.loading, such as below,
loadingHandler: 'backgroundHandler',
backgroundStyle: "background-image:url(../../build/imgs/qici.png);background-size:100% 100%",
Also we can customize our favorite start loading interface, in the below we will talk the circular progress bar as an example. The graph results as below,


The steps are as follows:
1, create a js file, the file name can be testLoading. Js, implement a class in the file, the name of the class can be called circleHandler, and this class must implement the following three methods:
A.void start (totalAssetCount) : when begin loading, the method will be called and the parameter is the total number of resources.
B. void progress (curCount) : resource loading progress notices, the parameter is the number of loaded resource.
C. void finish () : all resources to be loaded, the method will be called.
2, make the circleHandler class instantiation, then assigned to qici. LoadingHandler variables, as follows: qici. LoadingHandler = new circleHandler ();
The code is as below:
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
|| window[vendors[x]+'CancelRequestAnimationFrame'];
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() { callback(currTime + timeToCall); },
lastTime = currTime + timeToCall;
return id;

if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {

var circleHandler = function(){
this.tickState = 'normal';
circleHandler.prototype = {};
circleHandler.prototype.constructor = circleHandler;

circleHandler.prototype.start = function(totalAssetCount){
this.totalCount = totalAssetCount;

circleHandler.prototype.progress = function(curCount){

var percent = Math.floor(curCount / this.totalCount * 100);
var circle = document.getElementById('circle');
var imgLeft = -(percent*44+(percent*10))+'px' = imgLeft+'\t' + '0px';
circle.innerHTML = percent+'%';

circleHandler.prototype.finish = function(){
this.tickState = 'fadeout';
this.startFadingOutTime = new Date().getTime();

circleHandler.prototype._tick = function() {

var self = qici.loadingHandler;
if (self.tickState === 'done')

if (self.tickState === 'normal')

var time = new Date().getTime();
var delta = time - self.startFadingOutTime;

var rate = delta / 500;
if (rate > 1) {
// 移除进度条
self.tickState = 'done';
var circle = document.getElementById('circle');
else {
document.getElementById('circle').style.opacity = 1 - rate;
if (qici.config.loadingHandler === 'circleHandler')
document.write('<div id="circle" style="width:44px;margin:-22px 0px 0px -22px;position:absolute;left:50%;top:50%;height:44px;line-height:44px;text-align:center;z-index:10000;background: url(images/circle.png);"></div>');

if (qici.config.loadingHandler === 'circleHandler'){

qici.loadingHandler = new circleHandler();
1、When starting the html file, modify the qici.config.loadingHandler  to be custom  circleHandler,as below:
qici.config.loadingHandler = ‘circleHandler’;
2、When starting the html file, after loadedqc-loading.js,dispose the js file, shown as below, 
<body onload="qici.init();">
<div style="overflow:hidden;padding:0;margin:0;width:100%;height:100%;">
<div id="gameDiv" style="position:relative;"></div>
<script src='./lib/qc-loading.js'></script>
<script src="./testLoading.js"></script>



To reply to the article, please Login or registered