https://fancy-longma-4db126.netlify.app/mobile/javascript/LoadingJS.js

1function LoadingJS(){
2	
3	this.loadBookConfig();   //#1F2232,#DDDDDD
4	
5	this.body = $("body");
6
7  this.instance = $("<div id='loading_bg'></div>");
8  this.proTitle = $("<div id='progress_title'></div>");
9  this.stepTitle = $("<div id='step_title'></div>");
10  this.loadingBG = $("<div id='loading_progres'></div>");
11  this.loadingItem = $("<div id='loading_progress_item'></div>"); 
12
13  this.instance.css({
14  	"display" : "none",
15  	"position" : "absolute",
16  	"width" : "480px",
17  	"height" : "70px",
18  	'top' : '50%',
19  	'left' : '50%',
20  	'margin-left' : '-240px',
21  	'margin-top' : '-35px',
22  	"z-index" : 10000,
23  	"background-color" : "transparent"
24  });
25  //this.addGradient(this.instance,"#B3B3B3","white");
26  
27  /*
28  	"background-color" : "#1F2232",
29  	"border-radius" : "3px",
30  	"border":"1px solid #DCDCDC",
31  	"box-shadow" : "2px 2px 2px #333333",
32  	"-mz-box-shadow" : "2px 2px 2px #333333",
33  	"-ms-box-shadow" : "2px 2px 2px #333333",
34  	"-webkit-box-shadow" : "2px 2px 2px #333333",
35  	"-o-box-shadow" : "2px 2px 2px #333333"
36  */
37
38  this.proTitle.css({
39  	"position" : "absolute",
40  	"left" : "10px",
41  	"top" : "10px",
42  	"width" : "460px",
43  	"text-align" : "center",
44  	"font-family" : "Tahoma",
45  	"font-size" : "24px",
46  	"color" : "white",
47  	"word-break" : "keep-all",
48  	"white-space" : "nowrap",
49  	"overflow" : "hidden",
50  	"text-overflow" : "ellipsis"
51  	
52  });
53  
54  this.proTitle.css({"text-shadow":"0 0 5px #8c97cb, 0 0 10px #8c97cb,0 0 15px #8c97cb"});	 
55  
56  this.loadingBG.css({
57    "position" : "absolute",
58    "width" : "280px",
59    "height" : "10px",
60    "left" : "10px",
61    "top" : "35px",
62    "background-color" : "#F3F4F9",
63    "border-radius" : "2px",
64    "display":"none"
65  });
66  
67  this.loadingItem.css({
68  	"position" : "absolute",
69  	"width" : "0px",
70  	"height" : "10px",
71  	"left" : "0px",
72  	"top" : "0px",
73  	"background-color" : "#3FB5F2",
74  	"border-radius" : "2px",
75  	"display":"none"
76  });
77  
78  this.stepTitle.css({
79  	"position" : "absolute",
80  	"left" : "10px",
81  	"top" : "50px",
82  	"width" : "460px",
83  	"text-align" : "center",
84  	"font-family" : "Tahoma",
85  	"font-size" : "12px",
86  	"color" : this.loadingCaptionColor,
87  	"word-break" : "keep-all",
88  	"white-space" : "nowrap",
89  	"overflow" : "hidden",
90  	"text-overflow" : "ellipsis"
91  });
92  
93  //this.body.css({"background-color":this.backgroundColor});

94  this.initBackground();
95  
96  this.body.append(this.instance);
97  this.instance.append(this.proTitle);
98  this.instance.append(this.loadingBG);
99  this.instance.append(this.stepTitle);
100  this.loadingBG.append(this.loadingItem);
101  
102  this.init();  
103  this.addLoadingImage();
104  
105  this.show();
106}
107
108LoadingJS.prototype = {
109	loadBookConfig : function(){
110	
111		this.loadingCaption, this.loadingCaptionColor, this.hasLoadingPicture, this.loadingPicture;
112		
113	  try{
114	  	this.loadingCaption = bookConfig.loadingCaption?bookConfig.loadingCaption:"Loading";
115	  	this.loadingCaptionColor = bookConfig.loadingCaptionColor?bookConfig.loadingCaptionColor:"#DDDDDD";
116	  	this.loadingBackground = bookConfig.loadingBackground?bookConfig.loadingBackground:"#1F2232";
117	  	
118	  	this.loadingPicture = bookConfig.loadingPicture?bookConfig.loadingPicture:"";
119	  	this.hasLoadingPicture = (this.loadingPicture != "");
120	  }catch(err){
121	  	this.loadingCaption = "Loading";
122	  	this.loadingCaptionColor = "#DDDDDD";
123	  	
124	  	this.hasLoadingPicture = false;
125	  	this.loadingPicture = "";
126	  }
127	  
128	  //console.log("loadingPicture:%s", this.loadingPicture);
129	  
130	},
131	
132	init: function(){
133		var doc = $(document);
134		
135		var windowWidth = doc.width(), windowHeight = Math.max(doc.height(),400), progressWidth = 480, progressHeight = 70;
136		
137		var progressLeft = (windowWidth - progressWidth) / 2, progressTop = (windowHeight - progressHeight) / 2;
138		
139		// this.instance.css({"left":progressLeft + "px", "top":progressTop + "px"});
140		
141		this.proTitle.text($(document).attr("title"));
142		this.stepTitle.text(this.loadingCaption + "...");
143		
144		var self = this,iWidth = 0,iStep = 2;
145		var oldColor = this.colorSplit("#3FB5F2");
146		this.timer = window.setInterval(function(){
147
148				/*var pAddR = Math.floor((255 - oldColor.r) * iWidth / 280),
149				    pAddG = Math.floor((255 - oldColor.g) * iWidth / 280),
150				    pAddB = Math.floor((255 - oldColor.b) * iWidth / 280);
151				
152				var newEndColor = self.colorAdd("#3FB5F2",pAddR,pAddG,pAddB);
153				self.addGradient(self.loadingItem,"#3FB5F2",newEndColor);
154
155				self.loadingItem.css({width : iWidth +"px"});
156				iWidth += iStep;
157				if(iWidth == 280) iWidth = 0; */
158				
159				iWidth += iStep;
160				var iCount = Math.floor(iWidth / 50) % 3;
161				
162				switch(iCount){
163					case 0:{self.stepTitle.text(self.loadingCaption + ".  ");break;}
164					case 1:{self.stepTitle.text(self.loadingCaption + ".. ");break;}
165					case 2:{self.stepTitle.text(self.loadingCaption + "...");break;}
166					default:break;
167				}
168				
169				
170			},40);
171	},
172	show: function(){
173		this.instance.css({"display":"block"});
174	},
175	
176	addLoadingImage : function(){
177		if(this.hasLoadingPicture == false) return;
178		
179		this.loadingImg = $("<img style='display:none;position:absolute;z-index:10000'></img>");
180
181  	var self = this;
182  	this.loadingImg.load(function(){
183  		
184  		var doc = $(document), windowWidth = doc.width() , oImage = self.loadingImg[0];
185  		var iImageWidth = oImage.naturalWidth, iImageHeight = oImage.naturalHeight;
186  		
187  		var iInstanceTop;
188  		try{
189  			iInstanceTop = parseInt(self.instance.css("top").replace("px","")) + parseInt(self.instance.css("margin-top").replace("px",""));
190  	  }catch(err){
191  	  	iInstanceTop = iImageHeight;
192  	  }
193  	  
194  		var iLeft = (windowWidth - iImageWidth) / 2, iTop = iInstanceTop - iImageHeight;
195  		
196  		//console.log("image loaded, left:%d,top:%d,width:%d,height:%d",iLeft,iTop,iImageWidth,iImageHeight);
197
198  		self.loadingImg.css({
199  			"left" : iLeft + "px",
200  			"top" : iTop + "px",
201  			"width": iImageWidth + "px",
202  			"height": iImageHeight + "px",
203  			"display":"block"
204  		});
205  	});
206  	
207  	this.loadingImg.attr("src", this.loadingPicture);
208  	this.body.append(this.loadingImg);
209	},
210	
211	destroy: function(){
212		window.clearInterval(this.timer);
213		this.body.css({"background-color":""});
214		this.instance.css({"display":"none","z-index":1});
215		this.instance.empty();
216		this.instance.remove();
217		
218		if(this.loadingImg){
219			this.loadingImg.css({"display":"none","z-index":1});
220			this.loadingImg.remove();
221		}
222	},
223	getBrowserType : function(){
224		
225		var isIE11 = function(){
226			var userAgent = navigator.userAgent.toLowerCase();
227			return (!$.browser.msie) && (userAgent.indexOf("trident") > 0);
228		};
229		
230		var browserType = 0;
231		
232		if($.browser.msie || isIE11()) {
233			browserType = 3;
234		} else if($.browser.mozilla && !isIE11()) {
235			browserType = 2;
236		} else if($.browser.safari) {
237			browserType = 1;
238		} else if($.browser.opera) {
239			browserType = 4;
240		};
241		
242		return browserType;
243	},
244	addGradient : function(item,beginColor, endColor){
245		
246
247		var browserType = this.getBrowserType();
248
249		var sLeft = "",sMsLeft="0";
250		var horz = true;
251		if(horz) {sLeft = "left,";sMsLeft="1";}
252		
253		item.css({background: "linear-gradient("+ sLeft + beginColor +", "+ endColor +")"});
254		switch(browserType){
255			case 1:{
256				item.css({background: "-webkit-linear-gradient("+ sLeft + beginColor +", "+ endColor +")"});
257				break;
258			}
259			case 2:{
260				item.css({background: "-moz-linear-gradient("+ sLeft + beginColor +", "+ endColor +")"});
261				break;
262			}
263			case 3:{
264				item.css({background: "-ms-linear-gradient("+ sLeft + beginColor +", "+ endColor +")"});
265				item.css("filter", "progid:DXImageTransform.Microsoft.Gradient(GradientType="+ sMsLeft +", EndColorStr=" +
266			endColor + ", StartColorStr=" + beginColor + ")");					
267				break;
268			}
269			case 4:{
270				item.css({background: "-o-linear-gradient("+ sLeft + beginColor +", "+ endColor +")"});
271				break;
272		
273			}
274		}	
275	
276		
277	},
278	colorSplit : function(color){
279		var colorRGB = {r : 0, g : 0, b : 0};
280		
281		var red = "FF",green ="FF",blue = "FF";
282		
283		if(color.length == 7){
284	
285			red = color.substr(1, 2);
286			green = color.substr(3, 2);
287			blue = color.substr(5, 2);		
288		
289		}else if(color.length == 4){
290			
291			red = color.substr(1, 1);
292			green = color.substr(2, 1);
293			blue = color.substr(3, 1);
294			
295			red += red;
296			green += green;
297			blue += blue;
298	
299		}
300		colorRGB.r = parseInt(red,16);
301		colorRGB.g = parseInt(green,16);
302		colorRGB.b = parseInt(blue,16);
303		
304		return colorRGB;
305	},
306	
307	colorAdd :function(color, addR, addG, addB){
308		var colorRGB = this.colorSplit(color);
309		colorRGB.r = Math.min(colorRGB.r + addR, 255).toString(16);
310		colorRGB.g = Math.min(colorRGB.g + addG, 255).toString(16);
311		colorRGB.b = Math.min(colorRGB.b + addB, 255).toString(16);
312		colorRGB.r = (colorRGB.r.length <= 1) ? '0' + colorRGB.r : colorRGB.r;
313		colorRGB.g = (colorRGB.g.length <= 1) ? '0' + colorRGB.g : colorRGB.g;
314		colorRGB.b = (colorRGB.b.length <= 1) ? '0' + colorRGB.b : colorRGB.b;
315		return '#' + colorRGB.r + colorRGB.g + colorRGB.b;
316	},
317	initStatus : function(){
318		window.clearInterval(this.timer);
319		//this.stepTitle.text("Initialization...");
320	},

321	initBackground : function(){
322		
323		this.body.css({"background-color":this.loadingBackground});
324		
325		/*var beginColor,endColor,angle;
326		
327		try{
328			beginColor = bookConfig.bgBeginColor;
329			endColor = bookConfig.bgEndColor;
330			angle = bookConfig.bgMRotation;
331		}catch(err){
332			beginColor = "#1F2232";
333			endColor = "#1F2232";
334			angle = 90;
335		}
336		
337		if(beginColor == undefined) beginColor = "#1F2232";
338		if(endColor == undefined) endColor = "#1F2232";
339		if(angle == undefined) angle = 90;
340		
341		var angleStr = "0% 0%,100% 0%";
342		switch(angle) {
343			case 45:
344				angleStr = "0% 0%,100% 100%";
345				break;
346			case 90:
347				angleStr = "0% 0%,0% 100%";
348				break;
349			case 135:
350				angleStr = "100% 0%,0% 100%";
351				break;
352			case 180:
353				angleStr = "100% 0%,0% 0%";
354			case 0:
355				angleStr = "0% 0%,100% 0%";
356				break;
357		}
358		
359		var browserType = this.getBrowserType();
360		
361		
362		if(browserType == 1) {
363			this.body.css("background-image", "-webkit-gradient(linear," + angleStr + ",from(" + beginColor + "),to(" + endColor + "))");
364			
365		} else if(browserType == 2) {
366			this.body.css("background-image", "-moz-linear-gradient(left " + _angle + "deg," + beginColor + "," + endColor + ")");
367	
368		} else if(browserType == 3) {
369			this.body.css("filter", "progid:DXImageTransform.Microsoft.Gradient(GradientType=1, EndColorStr=" +
370				endColor + ", StartColorStr=" + beginColor + ");");
371		};*/
372		
373	}
374};
375
376var jsLoadingBar = new LoadingJS();