loader

js/about.js

@@ -8,10 +8,6 @@ const carousel = new bootstrap.Carousel(aboutCarouselElement, {
 
 jQuery(document).ready(function($) {
 
-  $(window).bind('load', function() {
-  	$('#loader').fadeOut(2000);
-  });
-
   $(function () {
     $('[data-toggle="tooltip"]').tooltip()
   })

js/studio.js

@@ -6,9 +6,6 @@ const carousel = new bootstrap.Carousel(studioCarouselElement, {
 
 jQuery(document).ready(function($) {
 
-  $(window).bind('load', function() {
-		$('#loader').fadeOut(2000);
-	});
 	$('.nav-toggle').on('touchstart click', function(e) {
 		e.preventDefault();
 		$( this ).toggleClass( 'active' );

loader.php

@@ -1,10 +1,10 @@
 <div id="loader">
 	<div class="loading-animation">
 		<div class="svg-wrap">
-			<svg class="l1" width="250px" height="250px">	
+			<svg class="l1" width="250px" height="250px">
 				<path d="M242.8,131.8c-0.4-29.9-22.1-50.1-48.1-50c-16.9,0-28.6,8.4-28.6,8.4s12.7-16.2,12.6-36.9c-0.2-24.7-23-47.9-52.4-47.9C97.6,5.4,71.8,26,72.3,55.5C72.6,76.3,85,90.2,85,90.2c0,0-13.9-8.7-29-8.2C16.5,83,6.6,115.8,7.3,132.9c1.2,33.4,15.4,53.8,52.7,54.2c34.2,0.4,54.9-32.3,61-43.5c1.5-9.5,0-13.9,0-13.9c-3.1,1.6-14.5,27.9-35.6,16.1c-6.8-3.8-8.8-16.7-5.2-26.3c6.3-16.9,18.3-18.7,36-40.3c6.8-8.3,8.2-13.6,8.2-13.6s1.2,5.2,7.8,13.2c17.4,21.2,30.1,23.6,36.7,40.4c4.1,10.4,1.8,23-6,26.9c-20.3,10.1-31.4-15.1-34.9-16.5c0,0-1.2,4,0.1,12.8c2.6,5.7,21.7,44.2,64,44.2C226.3,186.6,243.1,156.2,242.8,131.8z"/>
 			</svg>
-			<svg class="l2" width="250px" height="250px">	
+			<svg class="l2" width="250px" height="250px">
 				<path d="M124.5,154.1c0,0-10.8,37.5-12.7,41.9c-4.9,11.3-26.6,38.8-26.6,38.8s25.2-2.8,40.4-2.8c15.6,0,39.2,3.2,39.2,3.2s-22.8-28.1-27.6-39.6C135.4,191.2,124.5,154.1,124.5,154.1z"/>
 			</svg>
 			<svg class="l3" width="250px" height="250px">
@@ -12,4 +12,28 @@
 			</svg>
 		</div>
 	</div>
-</div>
+</div>
+<script>
+/* Hide the preloader on full page load, with a fail-safe so a hung resource
+   (or a load event that already fired) can never leave it stuck. Vanilla, so it
+   runs independently of jQuery / the per-page scripts. */
+(function () {
+	var HOLD = 1000;     // keep the loader up a beat after the page is ready
+	var FADE = 2000;     // slow fade-out (ms)
+	var FAILSAFE = 9000; // hard cap so it can never stick
+	var done = false;
+	function hideLoader() {
+		if (done) return;
+		done = true;
+		var el = document.getElementById('loader');
+		if (!el) return;
+		el.style.transition = 'opacity ' + FADE + 'ms ease';
+		el.style.opacity = '0';
+		setTimeout(function () { el.style.display = 'none'; }, FADE);
+	}
+	function schedule() { setTimeout(hideLoader, HOLD); }
+	if (document.readyState === 'complete') schedule();
+	else window.addEventListener('load', schedule);
+	setTimeout(hideLoader, FAILSAFE); // fail-safe — never trap behind a hung resource
+})();
+</script>