lazy load

5 files changed, 91 insertions, 8 deletions

diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index ea54eb6..457f39c 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -80,6 +80,7 @@ contentDir = "content/chinese"
     
     relatedPosts = true
     backtotop = true
+    lazyload = true  #if set true, lazy load images on websites asynchronously — that is, after the above-the-fold content is fully loaded, or even conditionally, only when they appear in the browser's viewport. 
     glowlogo = true # if want logo to have glowing style, set true.
     scrollindicator = true # if need scroll indicator on the top, set true
     gridstyle = true  # list post with grid style. If false then simple list
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index c69a7a3..b88c64c 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -62,6 +62,49 @@
 
 
     {{ end }}
+ <!-- lazy load -->
+    {{ if .Site.Params.lazyload }}
+    <script>
+    
+    function isVisible(elem) {
+
+      let coords = elem.getBoundingClientRect();
+
+      let windowHeight = document.documentElement.clientHeight;
+
+      // top elem edge is visible OR bottom elem edge is visible
+      let topVisible = coords.top > 0 && coords.top < windowHeight;
+      let bottomVisible = coords.bottom < windowHeight && coords.bottom > 0;
+
+      return topVisible || bottomVisible;
+    }
+
+    
+
+    function showVisible() {
+      for (let img of document.querySelectorAll('img')) {
+        let realSrc = img.dataset.src;
+        if (!realSrc) continue;
+
+        if (isVisible(img)) {
+          
+
+          img.src = realSrc;
+
+          img.dataset.src = '';
+        }
+      }
+      if ( Array.from(document.querySelectorAll('[data-src]')).every(
+        img => img.getAttribute('data-src') === '') ) {
+        window.removeEventListener('scroll', showVisible)
+      }
+
+    }
+
+    window.addEventListener('scroll', showVisible);
+    showVisible();
+  </script>
+{{ end }}
 
     <!-- scroll indicator -->
     {{ if .Site.Params.scrollindicator }}
diff --git a/layouts/_default/list.html b/layouts/_default/list.html
index 93a292f..a5829d4 100644
--- a/layouts/_default/list.html
+++ b/layouts/_default/list.html
@@ -13,18 +13,38 @@
 	{{ if modBool $i 3 }}
 		<div class="w3-row  w3-section">
 	{{ end }}
+  {{ if gt $i 1 }}
+    {{ .Scratch.Set "novisual" 1 }}
+  {{ end }}
   <div class="w3-col w3-container w3-section m12 l4 ">
     <div class="w3-card-2 w3-hover-shadow " >
     	{{ with .Params.thumbnail }}
-	    <div class="w3-hover-opacity"><img src="{{ relURL . }}" alt="Thumbnail" /></div>
+	    <div class="w3-hover-opacity thumb">
+        {{ if .Site.Params.lazyload | and (eq ( .Scratch.Get "novisual") 1) }}
+        <img src="placeholder.svg" data-src="{{ relURL . }}" alt="Thumbnail" />
+        {{ else }}
+        <img src="{{ relURL . }}" alt="Thumbnail" />
+        {{ end }}
+      </div>
 	    {{ else }}
-	    {{ if .Site.Params.firstpic}}
-	    {{ $img := findRE "<img .*?>" .Content 1 }}
-	    {{ range $img }}
-	    <div class="w3-hover-opacity">{{ (print . ) | safeHTML }}</div>
-	    {{ end }}
-	    {{ end }}
-	{{ end }}
+  	    {{ if .Site.Params.firstpic}}
+          {{ if .Site.Params.lazyload | and (eq ( .Scratch.Get "novisual") 1) }}
+    	     {{ $img := findRE "<img .*?src=\"(.*?)\".*?>" .Content 1 }}
+        	 {{ range $img }}
+                
+          	    <div class="w3-hover-opacity thumb"><img src="placeholder.svg" data-src="{{ replaceRE "<img .*?src=\"(.*?)\".*?>" "$1" . }}" alt="Thumbnail"/></div>
+           {{ end }}
+          {{ else }}
+            {{ $img := findRE "<img .*?src=\"(.*?)\".*?>" .Content 1 }}
+             {{ range $img }}
+                  
+                  <div class="w3-hover-opacity thumb"><img src="{{ replaceRE "<img .*?src=\"(.*?)\".*?>" "$1" . }}" alt="Thumbnail" /></div>
+             {{ end }}
+                
+          {{ end }}
+  	    {{ end }}
+  {{ end }}
+ 
     <header class="w3-container wraptext w3-text-indigo">
       <h4><a href="{{ .URL }}">{{ .Title | markdownify }}</a></h4>
       
diff --git a/static/css/style.css b/static/css/style.css
index 8921192..096e3b2 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -337,4 +337,22 @@ position: fixed;
   width: 0%;
 }
 
+.thumb {
+   position: relative;
+   width: 100%;
+   padding-top: 75%; /* 4:3 Aspect Ratio */
+   height: 0;
+  overflow: hidden;
+
+}
+
+.thumb img {
+    position:  absolute;
+   top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    max-height: 100%;
+    max-width: 100%;
+   
+}
 
diff --git a/static/placeholder.svg b/static/placeholder.svg
new file mode 100644
index 0000000..4a590b2
--- /dev/null
+++ b/static/placeholder.svg
@@ -0,0 +1 @@
+<svg width="198px" height="198px" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="uil-default"><rect x="0" y="0" width="100" height="100" fill="none" class="bk"/><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="rgba(44,44,44,0.6)" transform="rotate(0 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0s" repeatCount="indefinite"/></rect><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="rgba(44,44,44,0.6)" transform="rotate(36 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.1s" repeatCount="indefinite"/></rect><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="rgba(44,44,44,0.6)" transform="rotate(72 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.2s" repeatCount="indefinite"/></rect><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="rgba(44,44,44,0.6)" transform="rotate(108 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.3s" repeatCount="indefinite"/></rect><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="rgba(44,44,44,0.6)" transform="rotate(144 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.4s" repeatCount="indefinite"/></rect><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="rgba(44,44,44,0.6)" transform="rotate(180 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.5s" repeatCount="indefinite"/></rect><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="rgba(44,44,44,0.6)" transform="rotate(216 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.6s" repeatCount="indefinite"/></rect><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="rgba(44,44,44,0.6)" transform="rotate(252 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.7s" repeatCount="indefinite"/></rect><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="rgba(44,44,44,0.6)" transform="rotate(288 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.8s" repeatCount="indefinite"/></rect><rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" fill="rgba(44,44,44,0.6)" transform="rotate(324 50 50) translate(0 -30)">  <animate attributeName="opacity" from="1" to="0" dur="1s" begin="0.9s" repeatCount="indefinite"/></rect></svg>
\ No newline at end of file