https://sv-simeon.com/js/jpreLoader.js?v=4jan22

1/*
2* jPreLoader - jQuery plugin
3* Create a Loading Screen to preload images and content for you website
4*
5* Name:			jPreLoader.js
6* Author:		Kenny Ooi - http://www.inwebson.com
7* Date:			July 11, 2012		
8* Version:		2.1
9* Example:		http://www.inwebson.com/demo/jpreloader-v2/
10*	
11*/
12
13(function($) {
14	var items = new Array(),
15		errors = new Array(),
16		onComplete = function() {},
17		current = 0;
18	
19	var jpreOptions = {
20		splashVPos: '35%',
21		loaderVPos: '50%',
22		splashID: '#jpreContent',
23		showSplash: true,
24		showPercentage: true,
25		autoClose: true,
26		closeBtnText: 'Start!',
27		onetimeLoad: false,
28		debugMode: false,
29		splashFunction: function() {}
30	}
31	
32	//cookie
33	var getCookie = function() {
34		if( jpreOptions.onetimeLoad ) {
35			var cookies = document.cookie.split('; ');
36			for (var i = 0, parts; (parts = cookies[i] && cookies[i].split('=')); i++) {
37				if ((parts.shift()) === "jpreLoader") {
38					return (parts.join('='));
39				}
40			}
41			return false;
42		} else {
43			return false;
44		}
45		
46	}
47	var setCookie = function(expires) {
48		if( jpreOptions.onetimeLoad ) {
49			var exdate = new Date();
50			exdate.setDate( exdate.getDate() + expires );
51			var c_value = ((expires==null) ? "" : "expires=" + exdate.toUTCString());
52			document.cookie="jpreLoader=loaded; " + c_value;
53		}
54	}
55	
56	//create jpreLoader UI
57	var createContainer = function() {
58		
59		jOverlay = $('<div></div>')
60		.attr('id', 'jpreOverlay')
61		.css({
62			position: "fixed",
63			top: 0,
64			left: 0,
65			width: '100%',
66			height: '100%',
67			zIndex: 9999999
68		})
69		.appendTo('body');
70		
71		if(jpreOptions.showSplash) {
72			jContent = $('<div></div>')
73			.attr('id', 'jpreSlide')
74			.appendTo(jOverlay);
75			
76			var conWidth = $(window).width() - $(jContent).width();
77			$(jContent).css({
78				position: "absolute",
79				top: jpreOptions.splashVPos,
80				left: Math.round((50 / $(window).width()) * conWidth) + '%'
81			});
82			$(jContent).html($(jpreOptions.splashID).wrap('<div/>').parent().html());
83			$(jpreOptions.splashID).remove();
84			jpreOptions.splashFunction()			
85		}
86		
87		jLoader = $('<div></div>')
88		.attr('id', 'jpreLoader')
89		.appendTo(jOverlay);
90		
91		var posWidth = $(window).width() - $(jLoader).width();
92		$(jLoader).css({
93			position: 'absolute',
94			top: jpreOptions.loaderVPos,
95			left: Math.round((50 / $(window).width()) * posWidth) + '%'
96		});
97		
98		jBar = $('<div></div>')
99		.attr('id', 'jpreBar')
100		.css({
101			width: '0%',
102			height: '100%'
103		})
104		.appendTo(jLoader);
105		
106		if(jpreOptions.showPercentage) {
107			jPer = $('<div></div>')
108			.attr('id', 'jprePercentage')
109			.css({
110				position: 'relative',
111				height: '100%'
112			})
113			.appendTo(jLoader)
114			.html('Loading...');
115		}
116		if( !jpreOptions.autoclose ) {
117			jButton = $('<div></div>')
118			.attr('id', 'jpreButton')
119			.on('click', function() {
120				loadComplete();
121			})
122			.css({
123				position: 'relative',
124				height: '100%'
125			})
126			.appendTo(jLoader)
127			.text(jpreOptions.closeBtnText)
128			.hide();
129		}
130	}
131	
132	//get all images from css and <img> tag
133	var getImages = function(element) {
134		$(element).find('*:not(script)').each(function() {
135			var url = "";
136
137			if ($(this).css('background-image').indexOf('none') == -1 && $(this).css('background-image').indexOf('-gradient') == -1) {
138				url = $(this).css('background-image');
139				if(url.indexOf('url') != -1) {
140					var temp = url.match(/url\((.*?)\)/);
141					url = temp[1].replace(/\"/g, '');
142				}
143			} else if ($(this).get(0).nodeName.toLowerCase() == 'img' && typeof($(this).attr('src')) != 'undefined') {
144				url = $(this).attr('src');
145			}
146			
147			if (url.length > 0) {
148				items.push(url);
149			}
150		});
151	}
152	
153	//create preloaded image
154	var preloading = function() {
155		for (var i = 0; i < items.length; i++) {
156			if(loadImg(items[i]));
157		}
158	}
159	var loadImg = function(url) {
160		var imgLoad = new Image();
161		$(imgLoad)
162		.load(function() {
163			completeLoading();
164		})
165		.error(function() {
166			errors.push($(this).attr('src'));
167			completeLoading();
168		})
169		.attr('src', url);
170	}
171	
172	//update progress bar once image loaded
173	var completeLoading = function() {
174		current++;
175

176		var per = Math.round((current / items.length) * 100);
177		$(jBar).stop().animate({
178			width: per + '%'
179		}, 500, 'linear');
180		
181		if(jpreOptions.showPercentage) {
182			$(jPer).text(per+"%");
183		}
184		
185		//if all images loaded
186		if(current >= items.length) {
187			current = items.length;
188			setCookie();	//create cookie
189			
190			if(jpreOptions.showPercentage) {
191				$(jPer).text("100%");
192			}
193			
194			//fire debug mode
195			if (jpreOptions.debugMode) {
196				var error = debug();
197			}
198			
199			
200			//max progress bar
201			$(jBar).stop().animate({
202				width: '100%'
203			}, 500, 'linear', function() {
204				//autoclose on
205				if( jpreOptions.autoClose )
206					loadComplete();
207				else
208					$(jButton).fadeIn(1000);
209			});	
210		}	
211	}
212	
213	//triggered when all images are loaded
214	var loadComplete = function() {
215		$(jOverlay).fadeOut(800, function() {
216			$(jOverlay).remove();
217			onComplete();	//callback function
218		});
219	}
220	
221	//debug mode
222	var debug = function() {
223		if(errors.length > 0) {
224			var str = 'ERROR - IMAGE FILES MISSING!!!\n\r'
225			str	+= errors.length + ' image files cound not be found. \n\r';	
226			str += 'Please check your image paths and filenames:\n\r';
227			for (var i = 0; i < errors.length; i++) {
228				str += '- ' + errors[i] + '\n\r';
229			}
230			return true;
231		} else {
232			return false;
233		}
234	}
235	
236	$.fn.jpreLoader = function(options, callback) {
237        if(options) {
238            $.extend(jpreOptions, options );
239        }
240		if(typeof callback == 'function') {
241			onComplete = callback;
242		}
243		
244		//show preloader once JS loaded
245		$('body').css({
246			'display': 'block'
247		});
248		
249		return this.each(function() {
250			if( !(getCookie()) ) {
251				createContainer();
252				getImages(this);
253				preloading();
254			}
255			else {	//onetime load / cookie is set
256				$(jpreOptions.splashID).remove();
257				onComplete();
258			}
259		});
260    };
261
262})(jQuery);