Added settings to improve performance on IE 11 by allowing prevention of DOM object removal

Readme.md

@@ -149,12 +149,28 @@ NProgress.configure({ showSpinner: false });
 ~~~
 
 #### `parent`
-specify this to change the parent container. (default: `body`)
+Specify this to change the parent container. (default: `body`)
 
 ~~~ js
 NProgress.configure({ parent: '#container' });
 ~~~
 
+#### `forceRedraw`
+Force redraw in the browser when the progress changes. Can have performance implications. (default: `false`)
+
+~~~ js
+NProgress.configure({ forceRedraw: 'true' });
+~~~
+
+#### `removeFromDOM`
+Remove the component from the DOM when done, re-add when needed. This can have performance implications on complex apps in IE 11 as style calculations are slow. (default: `false`)
+
+~~~ js
+NProgress.configure({ removeFromDOM: 'true' });
+~~~
+
+
+
 Customization
 -------------
 

nprogress.js

@@ -24,6 +24,8 @@
     trickle: true,
     trickleSpeed: 250,
     showSpinner: true,
+	removeFromDOM: false,
+	forceRedraw: false,
     barSelector: '[role="bar"]',
     spinnerSelector: '[role="spinner"]',
     parent: 'body',
@@ -71,7 +73,11 @@
         speed    = Settings.speed,
         ease     = Settings.easing;
 
-    progress.offsetWidth; /* Repaint */
+
+		if(Settings.forceRedraw)
+		{
+			progress.offsetWidth; /* Repaint */
+		}
 
     queue(function(next) {
       // Set positionUsing if it hasn't already been set
@@ -86,7 +92,11 @@
           transition: 'none',
           opacity: 1
         });
-        progress.offsetWidth; /* Repaint */
+
+		if(Settings.forceRedraw)
+		{
+			progress.offsetWidth; /* Repaint */
+		}
 
         setTimeout(function() {
           css(progress, {
@@ -118,6 +128,16 @@
    *
    */
   NProgress.start = function() {
+
+
+	if(NProgress.isRendered() && !Settings.removeFromDOM)
+	{
+		var progress=  document.getElementById('nprogress');
+		//Marius - set to visible after hiding
+		progress.style.visibility = "visible";
+		NProgress.status = null;
+	}
+
     if (!NProgress.status) NProgress.set(0);
 
     var work = function() {
@@ -269,10 +289,19 @@
    */
 
   NProgress.remove = function() {
-    removeClass(document.documentElement, 'nprogress-busy');
-    removeClass(document.querySelector(Settings.parent), 'nprogress-custom-parent');
-    var progress = document.getElementById('nprogress');
-    progress && removeElement(progress);
+	if(!Settings.removeFromDOM)
+	{
+		//Marius change - hide rather than remove from DOM, as this is super expensive in IE
+		var progress = document.getElementById('nprogress');
+		progress.style.visibility = "hidden";
+	}
+	else
+	{
+	    removeClass(document.documentElement, 'nprogress-busy');
+		removeClass(document.querySelector(Settings.parent), 'nprogress-custom-parent');
+		var progress = document.getElementById('nprogress');
+		progress && removeElement(progress);
+	}
   };
 
   /**

test/test.js

@@ -41,7 +41,16 @@
         assert.equal($("#nprogress").length, 1);
 
         setTimeout(function() {
+
+		if(NProgress.settings.removeFromDOM)
+		{
           assert.equal($("#nprogress").length, 0);
+		}
+		else
+		{
+			$("#nprogress").visibility = "hidden";
+		}
+
           done();
         }, 70);
       });
@@ -109,8 +118,17 @@
         NProgress.remove();
 
         var parent = $(NProgress.settings.parent);
-        assert.isFalse(parent.hasClass('nprogress-custom-parent'));
-        assert.equal(parent.find('#nprogress').length, 0);
+
+		if(NProgress.settings.removeFromDOM)
+		{
+			assert.isFalse(parent.hasClass('nprogress-custom-parent'));
+			assert.equal(parent.find('#nprogress').length, 0);
+		}
+		else
+		{
+			$("#nprogress").visibility = "hidden";
+		}		
+
       });
     });