Merge pull request #125 from Gaya/instant-overlay

Instant overlay
Gaya · Feb 24, 2015 · 2605f3d · 2605f3d
2 parents f1d4833 + dec930b
commit 2605f3d
Show file tree

Hide file tree

Showing 6 changed files with 33 additions and 9 deletions.
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "QueryLoader2",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "homepage": "http://www.gayadesign.com/diy/queryloader2-preload-your-images-with-ease/",
   "authors": [
     "Gaya <gaya.kessler@gmail.com>"

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "queryloader2",
-  "version": "3.0.8",
+  "version": "3.0.9",
   "homepage": "http://gaya.ninja",
   "description": "QueryLoader2 serves the main purpose of preloading the images on your website by showing an overlay and a loading bar. It automatically fetches all your images and background images and preloads them before showing the webpage.",
   "dependencies": {},

diff --git a/queryloader2.min.js b/queryloader2.min.js
diff --git a/src/QueryLoader.js b/src/QueryLoader.js
@@ -38,6 +38,7 @@ QueryLoader.prototype.init = function () {
 
     if (typeof this.element !== "undefined") {
         this.createOverlay();
+        this.removeTempOverlay();
         this.createPreloader();
         this.startMaxTimeout();
     }
@@ -79,6 +80,30 @@ QueryLoader.prototype.createOverlay = function () {
     }
 };
 
+QueryLoader.prototype.removeTempOverlay = function () {
+    window.setTimeout(function () {
+        var tempOverlay = document.getElementById("qLtempOverlay");
+        if (tempOverlay) {
+            tempOverlay.parentNode.removeChild(tempOverlay);
+        }
+    }, 0);
+};
+
+QueryLoader.createTempOverlay = function () {
+    window.setTimeout(function () {
+        var tempOverlay = document.createElement("div");
+        tempOverlay.style.position = "fixed";
+        tempOverlay.style.width = "100%";
+        tempOverlay.style.height = "100%";
+        tempOverlay.style.zIndex = "9999";
+        tempOverlay.style.backgroundColor = "#000";
+        tempOverlay.style.left = "0";
+        tempOverlay.style.top = "0";
+        tempOverlay.setAttribute("id", "qLtempOverlay");
+        document.getElementsByTagName('body')[0].appendChild(tempOverlay);
+    }, 0);
+};
+
 QueryLoader.prototype.createPreloader = function () {
     'use strict';
     this.preloader = new ImagePreloader(this);

diff --git a/src/main.js b/src/main.js
@@ -14,8 +14,7 @@ if (window.jQuery || window.Zepto) {
 }
 
 // component
-if (typeof(module) !== 'undefined')
-{
+if (typeof(module) !== 'undefined') {
     module.exports = QueryLoader2;
 }
 
@@ -27,4 +26,5 @@ if (typeof define === 'function' && define.amd) {
     });
 }
 
-window.QueryLoader2 = QueryLoader2;
+window.QueryLoader2 = QueryLoader2;
+QueryLoader2.createTempOverlay();
diff --git a/test/browser/index.html b/test/browser/index.html
@@ -12,7 +12,6 @@
     </head>
 
     <body>
-        <div id="qLoverlay"></div>
         <div id="content">
             <h1>QueryLoader v2 demo page</h1>
-Original file line number
+Diff line change
@@ Expand Up / @@ -12,7 +12,6 @@ @@
         </head>
         <body>
-            <div id="qLoverlay"></div>
             <div id="content">
                 <h1>QueryLoader v2 demo page</h1>
@@ Expand Down @@