Merge pull request #159 from viosey/feat/load_queue

feat(load): add a javascript load queue
iblh · Jan 21, 2017 · e6f6cef · e6f6cef
2 parents 56519a3 + ef0c3d6
commit e6f6cef
Show file tree

Hide file tree

Showing 7 changed files with 93 additions and 29 deletions.
diff --git a/layout/_partial/config_css.ejs b/layout/_partial/config_css.ejs
@@ -77,13 +77,6 @@
             background-color: #fff;
         }
     </style>
-    <script type="text/javascript">
-        window.onload = function () {
-            setTimeout(function () {
-                document.body.background="https://api.i-meto.com/bing?<%= theme.background.bing.parameter %>";
-            }, 2000);
-        }
-    </script>
 <% } else if(!theme.background.bgimg) { %>
     <style>
         body{

diff --git a/layout/_partial/footer-option.ejs b/layout/_partial/footer-option.ejs
@@ -12,21 +12,23 @@
     <script src="<%= theme.busuanzi.busuanzi_pure_mini_js %>"></script>
 <% } %>
 
-<% if(theme.comment.use == "duoshuo") { %>
+<% if(theme.comment.use == 'duoshuo') { %>
     <!-- 多说公共 js 代码 start -->
     <script type="text/javascript">
-        var duoshuoQuery = {
-            short_name: '<%= theme.comment.shortname %>'
-        };
-        (function() {
-            var ds = document.createElement('script');
-            ds.type = 'text/javascript';
-            ds.async = true;
-            ds.src = '<%= theme.comment.duoshuo_embed_js_url %>';
-            ds.charset = 'UTF-8';
-            (document.getElementsByTagName('head')[0]
-             || document.getElementsByTagName('body')[0]).appendChild(ds);
-        })();
+        queue.offer(function(){
+            var duoshuoQuery = {
+                short_name: '<%= theme.comment.shortname %>'
+            };
+            (function() {
+                var ds = document.createElement('script');
+                ds.type = 'text/javascript';
+                ds.async = true;
+                ds.src = '<%= theme.comment.duoshuo_embed_js_url %>';
+                ds.charset = 'UTF-8';
+                (document.getElementsByTagName('head')[0]
+                 || document.getElementsByTagName('body')[0]).appendChild(ds);
+            })();
+        });
     </script>
     <!-- 多说公共 js 代码 end -->
 <% } %>

diff --git a/layout/_partial/head.ejs b/layout/_partial/head.ejs
@@ -80,10 +80,12 @@
     <![endif]-->
 
     <!-- Import CSS -->
-    <%- css("css/material.min") %>
-    <%- css("css/style.min") %>
-    <%- partial("_partial/config_css") %>
-    <%- js("js/jquery.min") %>
+    <%- css('css/material.min') %>
+    <%- css('css/style.min') %>
+    <%- partial('_partial/config_css') %>
+    <%- js('js/jquery.min') %>
+    <%- js('js/queue') %>
+    <%- js('js/lazyload.min') %>
 
     <%- css("css/highlight/" + theme.reading.code_highlight ) %>
 
@@ -119,6 +121,16 @@
     </script>
     <% } %>
 
+    <!-- Bing Background -->
+    <% if(theme.background.bing.enable) { %>
+        <script type="text/javascript">
+            queue.offer(function(){
+                $('body').attr('data-original', 'https://api.i-meto.com/bing?<%= theme.background.bing.parameter %>');
+                $('body.lazy').lazyload();
+            });
+        </script>
+    <% } %>
+
     <!-- Custom Head -->
     <% if (site.data.head) { %>
         <% for (var i in site.data.head) { %>

diff --git a/layout/_widget/disqus.ejs b/layout/_widget/disqus.ejs
@@ -1,7 +1,6 @@
 <div id="disqus_thread"></div>
 <script>
-    $('html').ready(function() {
-        setTimeout(function() {
+    queue.offer(function() {
             var disqus_config = function () {
                 this.page.url = '<%- config.url + url_for(path) %>';  // Replace PAGE_URL with your page's canonical URL variable
                 this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
@@ -14,6 +13,5 @@
                 s.setAttribute('data-timestamp', + new Date());
                 (d.head || d.body).appendChild(s);
             })();
-        },1500);
-    });
+        });
 </script>
diff --git a/layout/layout.ejs b/layout/layout.ejs
@@ -6,7 +6,7 @@
         <!-- Single Gallery Page -->
         <%- partial('_widget/page-gallery') %>
     <% } else { %>
-        <body id="scheme-<%= theme.scheme %>">
+        <body id="scheme-<%= theme.scheme %>" class="lazy">
             <div class="material-layout  mdl-js-layout has-drawer is-upgraded">
                 <% if(theme.scheme === 'Isolation') { %>
                     <!-- Isolation Header -->

diff --git a/source/js/lazyload.min.js b/source/js/lazyload.min.js
diff --git a/source/js/queue.js b/source/js/queue.js
@@ -0,0 +1,51 @@
+function Queue() {
+    this.dataStore = [];
+    this.offer = offer;
+    this.poll = poll;
+    this.execNext = execNext;
+    this.debug = false;
+    this.startDebug = startDebug;
+
+
+    function offer(element) {
+        if(this.debug){
+            console.log('Offered a Queued Function.');
+        }
+        if(typeof element === 'function') {
+            this.dataStore.push(element);
+        } else {
+            console.log('You must offer a function.');
+        }
+    }
+
+    function poll() {
+        if(this.debug){
+            console.log('Polled a Queued Function.');
+        }
+        return this.dataStore.shift();
+    }
+
+    function execNext() {
+        var nextfunc = this.poll();
+        if(nextfunc !== undefined) {
+            if(this.debug){
+                console.log('Run a Queued Function.');
+            }
+            nextfunc();
+        }
+    }
+
+    function startDebug(){
+        this.debug = true;
+    }
+
+}
+
+var queue = new Queue();
+$(document).ready(function(){
+    setTimeout(function(){
+        setInterval(function(){
+            queue.execNext();
+        },500);
+    },3000);
+});