Merge pull request #82 from liuboaibc/fix/fix-footer

fix footer and img lazyload

assets/scss/header.scss

@@ -80,10 +80,11 @@
 
   .menu-span::after {
     display: inline-block;
+    vertical-align: top;
     content: '';
     margin-left: 5px;
-    border-width: 4px 2px;
-    border: solid transparent;
+    margin-top: 10px;
+    border:  4px solid transparent;
     border-top-color: #fff;
   }
 
@@ -92,12 +93,13 @@
     position: absolute;
     top: 40px;
     box-sizing: border-box;
-    width: 160px;
+    max-width: 300px;
     padding: 12px 0;
     left: 50%;
     transform: translateX(-50%);
     background: #ffffff;
     line-height: 30px;
+    white-space: nowrap;
     font-size: 0;
     border-radius: 6px;
     box-shadow: 0 4px 8px 0 rgba(36,46,66,.06),0 8px 16px 0 rgba(36,46,66,.05);
@@ -137,14 +139,6 @@
     // }
   }
 
-  .menu-2 {
-    width: 260px;
-  }
-
-  .menu-5 {
-    width: 120px;
-  }
-
   .right-menu {
     position: absolute;
     top: 28px;
@@ -177,20 +171,25 @@
 
         span::after {
           display: inline-block;
+          vertical-align: top;
           content: '';
           margin-left: 5px;
-          border-width: 4px 2px;
-          border: solid transparent;
+          margin-top: 6px;
+          border: 4px solid transparent;
           border-top-color: #fff;
         }
       }
       .dropdown-menu {
         color: black;
-        width: 100px;
-        padding-left: 20px;
+        padding: 10px 20px;
         li {
           padding: 0;
           margin: 0;
+          color: #36435c;
+    
+          &:hover {
+            color: #55bc8a;
+          }
         }
       }
     }
@@ -208,8 +207,9 @@
       }
 
       .dropdown-menu {
-        width: 300px;
         top: 60px;
+        min-width: 280px;
+        white-space: normal;
       }
 
       ol {

content/en/_index.md

@@ -102,19 +102,19 @@ section4:
     - name: Service Mesh (Istio-based)
       icon: /images/home/service.svg
       content: Provide fine-grained traffic management, observability and tracing, and offer visualization for traffic topology
-      link: "../service-mesh"
+      link: "service-mesh"
       color: red
 
     - name: Rich Observability
       icon: /images/home/rich.svg
       content: Multi-dimensional monitoring, events and audit logs query are supported; multi-tenant log query and collection, alerting and notification are built-in
-      link: "../observability"
+      link: "observability"
       color: green
 
     - name: DevOps System
       icon: /images/home/dev-ops.svg
       content: Out-of-box CI/CD based on Jenkins, and automated workflow tools including Source-to-Image & Binary-to-Image
-      link: "/devops"
+      link: "devops"
       color: orange
 
     - name: Multiple Storage Solutions

content/zh/_index.md

@@ -102,19 +102,19 @@ section4:
     - name: 基于 Istio 的微服务治理
       icon: /images/home/service.svg
       content: 提供细粒度的流量管理、流量监控、灰度发布、分布式追踪，支持可视化的流量拓扑
-      link: "../service-mesh"
+      link: "service-mesh"
       color: red
 
     - name: 丰富的可观察性
       icon: /images/home/rich.svg
       content: 提供多维度与多租户的监控、日志、事件、审计搜索，支持多种告警策略与通知渠道，支持日志转发
-      link: "../observability"
+      link: "observability"
       color: green
 
     - name: DevOps 系统
       icon: /images/home/dev-ops.svg
       content: 基于 Jenkins 为引擎打造的 CI/CD，内置 Source-to-Image 和 Binary-to-Image 自动化打包部署工具
-      link: "/devops"
+      link: "devops"
       color: orange
 
     - name: 支持多种存储方案

layouts/404.html

@@ -1,9 +1,9 @@
 {{ define "main" }}
 <section class="section-1">
-    <img class="img-1" src="/images/404/combined-shape.svg" alt="">
-    <img class="img-2" src="/images/404/fill.svg" alt="">
+    <img class="img-1" data-src="/images/404/combined-shape.svg" alt="">
+    <img class="img-2" data-src="/images/404/fill.svg" alt="">
     <div class="common-layout">
-        <img src="/images/404/404.png" alt="">
+        <img data-src="/images/404/404.png" alt="">
         <p>{{ i18n "We can’t find the page that you’re looking for :(" }}</p>
         <a href="{{ site.Home.RelPermalink }}">
             <button>{{ i18n "Go To Home" }}</button>

layouts/_default/scenario.html

@@ -9,9 +9,9 @@
 {{ end }}
 
 <section class="section-img">
-  <img class="common-layout" src="{{ .Params.image }}" alt="">
+  <img class="common-layout" data-src="{{ .Params.image }}" alt="">
   {{ if .Params.bg }}
-  <img class="bg" src="{{ .Params.bg }}" alt="">
+  <img class="bg" data-src="{{ .Params.bg }}" alt="">
   {{ end }}
 </section>
 
@@ -35,7 +35,7 @@
           </ul>
           {{ end }}
         </div>
-        <img src="{{ .image }}" alt="">
+        <img data-src="{{ .image }}" alt="">
       </li>
       {{ end }}
     </ul>
@@ -45,8 +45,8 @@
 
 <section class="section-3">
   {{ with .Params.section3 }}
-  <img class="bg-left" src="{{ .bgLeft }}" alt="">
-  <img class="bg-right" src="{{ .bgRight }}" alt="">
+  <img class="bg-left" data-src="{{ .bgLeft }}" alt="">
+  <img class="bg-right" data-src="{{ .bgRight }}" alt="">
   <div class="common-layout">
     <h2 class="title-black-h2">{{ .title }}</h2>
     {{ if .videoLink }}
@@ -60,7 +60,7 @@
         allowfullscreen>
     </iframe>
     {{ else }}
-    <img src="{{ .image }}" alt="">
+    <img data-src="{{ .image }}" alt="">
     {{ end }}
     <p class="common-p">{{ .content }}</p>
     <a href="{{ .link }}"><button class="common-btn">{{ .btnContent }}</button></a>

layouts/blogs/list.html

@@ -17,13 +17,13 @@
             {{ range .Data.Pages }}
             <li data-tag='{{ .Params.tag }}'>
                 <div class='img-div'>
-                    <img src="{{ .Params.snapshot }}" alt="">
+                    <img data-src="{{ .Params.snapshot }}" alt="">
                 </div>
                 <div class='content-div'>
                     <p class='time'>{{ .Params.createTime }}</p>
                     <h3><a href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
                     <div class='author'>
-                        <img src="" alt="">
+                        <!-- <img src="" alt=""> -->
                         <span>{{ .Params.author }}</span>
                     </div>
                     <p class='summary'>{{ substr .Summary 0 120 }}</p>

layouts/case/list.html

@@ -15,7 +15,7 @@
     <ul class="cases-ul common-layout">
         {{ range .caseList }}
             <li>
-                <img src="{{ .icon | relURL }}" alt="">
+                <img data-src="{{ .icon | relURL }}" alt="">
                 <p class="title-p">{{ .content }}</p>
                 <div>
                     <a class="common-green-a" href="{{ .link }}">{{ $tip }}</a>
@@ -23,7 +23,7 @@
             </li>
         {{ end }}
     </ul>
-    <img src="{{ .icon | relURL }}" alt="">
+    <img data-src="{{ .icon | relURL }}" alt="">
     {{ end }}
 </section>
 
@@ -42,7 +42,7 @@
             {{ $name := .name }}
             {{ range .children }}
             <li data-name="{{ $name }}">
-                <img src="{{ .icon | relURL }}" alt="">
+                <img data-src="{{ .icon | relURL }}" alt="">
             </li>
             {{ end }}
             {{ end }}
@@ -51,7 +51,7 @@
         <p>{{ .content }} <a class="common-green-a" href="{{ .link }}">{{ .linkContent }}</a></p>
         {{ end }}
     </div>
-    <img src="{{ .icon | relURL }}" alt="">
+    <img data-src="{{ .icon | relURL }}" alt="">
     {{ end }}
 </section>
 <script>

layouts/case/single.html

@@ -14,7 +14,7 @@
   <div class="common-layout">
     <div>
       {{ with .rightPart}}
-      <img src="{{ .icon }}" alt="">
+      <img data-src="{{ .icon }}" alt="">
       <ul class='ul-right'>
         {{ range .list }}
         <li>
@@ -40,7 +40,7 @@
         <div>
           <p class='p1'>{{ .content }}</p>
           <p class='p2'>{{ .author }}</p>
-          <img src="/images/case/ic-quote-right.svg" alt="">
+          <img data-src="/images/case/ic-quote-right.svg" alt="">
         </div>
         {{ else }}
           <h2>{{ .title }}</h2>
@@ -48,14 +48,14 @@
           <p>{{ .content }}</p>
           {{ end }}
           {{ if .image }}
-          <img src="{{ .image }}" alt="">
+          <img data-src="{{ .image }}" alt="">
           {{ end }}
         {{ end }}
       </li>
       {{ end }}
     </ul>
   </div>
-  <img src="/images/common/hexagon.svg" alt="">
+  <img data-src="/images/common/hexagon.svg" alt="">
   {{ end }}
 </section>
 {{ end }}

layouts/conferences/list.html

@@ -8,10 +8,10 @@
                 {{ range .Params.list }}
                 <li>
                     <div class='top-div'>
-                        <img class='left-img' src="{{ .bg | relURL }}" alt="">
+                        <img class='left-img' data-src="{{ .bg | relURL }}" alt="">
                         <h3>{{ .name }}</h3>
                         <p>{{ .content }}</p>
-                        <img class='right-img' src="{{  .icon | relURL }}" alt="">
+                        <img class='right-img' data-src="{{  .icon | relURL }}" alt="">
                     </div>
                     <ul>
                         {{ range .children }}
@@ -21,7 +21,7 @@
                             <p>{{ .summary }}</p>
                             <div class='line'></div>
                             <a href="{{ .link }}"><button>{{ $viewDetail }}</button></a>
-                            <img src="{{ .image | relURL }}" alt="">
+                            <img data-src="{{ .image | relURL }}" alt="">
                         </li>
                         {{ end }}
                     </ul>

layouts/contribution/list.html

@@ -16,7 +16,7 @@
         {{ range .topType }}
             <li>
                 <div class='title'>
-                    <img src="{{ .icon1 | relURL }}" alt="">
+                    <img data-src="{{ .icon1 | relURL }}" alt="">
                     <p>{{ .name }}</p>
                 </div>
                 <div class='line'></div>
@@ -27,7 +27,7 @@
                     </li>
                     {{ end }}
                 </ul>
-                <img class='bottom-img' src="{{ .icon2 | relURL }}" alt="">
+                <img class='bottom-img' data-src="{{ .icon2 | relURL }}" alt="">
             </li>
         {{ end }}
         </ul>
@@ -37,19 +37,19 @@
             <h2 class="title-black-h2">{{ .topic }}</h2>
             <div>
                 <div class='top-div'>{{ .name }}</div>
-                <img src="{{ .icon | relURL }}" alt="">
+                <img data-src="{{ .icon | relURL }}" alt="">
                 <ul class="common-flex-layout">
                     {{ range $index, $element := .type }}
                     <li>
                         <div>
-                            <img src="{{ .icon | relURL }}" alt="">
+                            <img data-src="{{ .icon | relURL }}" alt="">
                             <span>{{ .name }}</span>
                         </div>
                         {{ if .children }}
                         <ul>
                             {{ range .children }}
                             <li class="">
-                                <img src="{{ $topIcon | relURL }}" alt="">
+                                <img data-src="{{ $topIcon | relURL }}" alt="">
                                 <div>{{ .name }}</div>
                                 {{ if eq $index 1}}
                                 <p class='left'>{{ .content }}</p>
@@ -85,7 +85,7 @@
             {{ $icon = $element.iconActive }}
             {{ end }}
             <li class="{{ $active }}" data-info='{{ . | jsonify }}' data-index='{{ $index }}'>
-                <img src="{{ $icon | relURL }}" alt="">
+                <img data-src="{{ $icon | relURL }}" alt="">
                 <p>{{ $element.name }}</p>
             </li>
             {{ end }}
@@ -95,7 +95,7 @@
         {{ with $first := index .children 0}}
         <div>
             <div class='btn-change btn-left' data-num='-1'></div>
-            <img class='bottom-img' src="{{ .iconActive | relURL }}" alt="">
+            <img class='bottom-img' data-src="{{ .iconActive | relURL }}" alt="">
             <div class='btn-change btn-right' data-num='1'></div>
         </div>
         <a class="common-green-a" href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .linkContent }}</a>
@@ -103,7 +103,7 @@
         <ul>
             {{ range .children }}
             <li>
-                <img src="{{ .icon | relURL }}" alt="">
+                <img data-src="{{ .icon | relURL }}" alt="">
             </li>
             {{ end }}
         </ul>
@@ -114,12 +114,12 @@
 
 <section class='section-4'>
     {{ with .Params.section4.involved }}
-    <img src="/images/contribution/involve-bg.jpg" alt="">
+    <img data-src="/images/contribution/involve-bg.jpg" alt="">
     <h2 class="title-white-h2 ">{{ .title }}</h2>
     <div  class="common-flex-layout">
         {{ range .children}}
         <div>
-            <img src="{{ .icon | relURL }}" alt="">
+            <img data-src="{{ .icon | relURL }}" alt="">
             <h3 class="title-white-h3">{{ .title }}</h3>
             <p class="common-center-p">{{ .content }}</p>
             <div>
@@ -138,7 +138,7 @@
         <ul>
             {{ range .list }}
             <li>
-                <img src="{{ .icon }}" alt="">
+                <img data-src="{{ .icon }}" alt="">
             </li>
             {{ end }}
         </ul>
@@ -196,7 +196,7 @@
         var ul = bottomDiv.find('ul')
         ul.empty()
         $.each(info.children, function( key, value ) {
-            ul.append('<li><img src="' + value.icon + '" alt="" ></li>');
+            ul.append('<li><img data-src="' + value.icon + '" alt="" ></li>');
         });
     }
 

layouts/contribution/request.html

@@ -19,7 +19,7 @@
 </section>
 
 <section class='section-4' style="min-height: 445px; padding-bottom: 0;">
-  <img src="/images/contribution/involve-bg.jpg" alt="">
+  <img data-src="/images/contribution/involve-bg.jpg" alt="">
 </section>
 
 {{ end }}

layouts/docs/list.html

@@ -16,7 +16,7 @@
 </head>
 <body>
     <header>
-        <a href="{{ site.Home.RelPermalink }}"><img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
+        <a href="{{ site.Home.RelPermalink }}"><img data-src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
         <div class="header-div">
             <h1>{{ i18n "introduction8" }}</h1>
             <p>{{ i18n "introduction9" }}</p>

layouts/docs/single.html

@@ -20,7 +20,7 @@
     </div>
     <div class="middle-div">
         <div class="header-div">
-            <a href="{{ site.Home.RelPermalink }}"><img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
+            <a href="{{ site.Home.RelPermalink }}"><img data-src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="logo"></a>
         </div>
         <div class="content-div">
             <div class="md-body">

layouts/index.html

@@ -2,9 +2,9 @@
 {{ $data := index .Site.Data .Site.Language.Lang }}
 <section class='section-1'>
   {{ with .Params.section1 }}
-  <img class='img1' src="images/home/bg.jpg" alt="">
-  <img class='img2' src="/images/home/12-3.png" alt="">
-  <img class='img3' src="/images/home/2.svg" alt="">
+  <img class='img1' data-src="images/home/bg.jpg" alt="">
+  <img class='img2' data-src="/images/home/12-3.png" alt="">
+  <img class='img3' data-src="/images/home/2.svg" alt="">
   <div class="common-layout">
     <div>
       <p class='p1'>{{ .title | safeHTML }}</p>
@@ -17,9 +17,9 @@
         <button class='btn2 common-btn'>{{ .btnContent2 }}</button>
       </a>
     </div>
-    <img class='img1' src="/images/home/53.png" alt="">
-    <img class='img2' src="/images/home/left.svg" alt="">
-    <img class='img4' src="/images/home/46.svg" alt="">
+    <img class='img1' data-src="/images/home/53.png" alt="">
+    <img class='img2' data-src="/images/home/left.svg" alt="">
+    <img class='img4' data-src="/images/home/46.svg" alt="">
   </div>
   {{ end }}
 </section>
@@ -64,7 +64,7 @@
           <li>{{ .content | safeHTML }}</li>
           {{ end }}
         </ul>
-        <img src="{{ .icon | relURL }}" alt="">
+        <img data-src="{{ .icon | relURL }}" alt="">
       </div>
       {{ end }}
 
@@ -75,8 +75,8 @@
 
 <section class='section-4'>
   {{ with .Params.section4 }}
-  <img class='bg-1' src="/images/home/section4-left.png" alt="">
-  <img class='bg-2' src="/images/home/section4-right.svg" alt="">
+  <img class='bg-1' data-src="/images/home/section4-left.png" alt="">
+  <img class='bg-2' data-src="/images/home/section4-right.svg" alt="">
   <div class="common-layout">
     <div>
       <h2>{{ .title }}</h2>
@@ -84,7 +84,7 @@
       <ul>
         {{ range .children }}
         <li>
-          <img src="{{ .icon }}" alt="">
+          <img data-src="{{ .icon }}" alt="">
           <div>
             <h3 class="title-white-h3">{{ .name }}</h3>
             <p class="common-p">{{ .content | safeHTML }}</p>
@@ -100,7 +100,7 @@
         <div>
           <div class='top-line {{ .color }}'></div>
           <div class='img-span-div'>
-            <img class="common-middle-inline" src="{{ .icon }}" alt="">
+            <img class="common-middle-inline" data-src="{{ .icon }}" alt="">
             <span class="common-middle-inline">{{ .name }}</span>
           </div>
           <p class="common-p">{{ .content | safeHTML }}</p>
@@ -130,7 +130,7 @@
         <ul>
           {{ range .children }}
           <li>
-            <img src="{{ .icon }}" alt="">
+            <img data-src="{{ .icon }}" alt="">
           </li>
           {{ end }}
         </ul>
@@ -148,8 +148,8 @@
           </ul>
         </div>
         <div class='image'>
-          <img src="/images/home/applications.png" alt="">
-          <img src="/images/home/applications.png" alt="">
+          <img data-src="/images/home/applications.png" alt="">
+          <img data-src="/images/home/applications.png" alt="">
         </div>
       </div>
       {{ end }}
@@ -166,7 +166,7 @@
     <ul class="common-flex-layout">
       {{ range .children }}
       <li>
-        <img src="{{ .icon }}" alt="">
+        <img data-src="{{ .icon }}" alt="">
       </li>
       {{ end }}
     </ul>
@@ -179,22 +179,22 @@
     <a class='join-div' href="{{ .joinLink }}">
       <p class='p1'>{{ .joinTitle }}</p>
       <p class='p2'>{{ .joinContent }}</p>
-      <img src="/images/home/join-right.svg" alt="">
+      <img data-src="/images/home/join-right.svg" alt="">
     </a>
-    <img class='bottom-img' src="{{ .image }}" alt="">
+    <img class='bottom-img' data-src="{{ .image }}" alt="">
   </div>
-  <img class='bg-1' src="/images/home/section6-left.svg" alt="">
-  <img class='bg-2' src="/images/home/section6-right.svg" alt="">
+  <img class='bg-1' data-src="/images/home/section6-left.svg" alt="">
+  <img class='bg-2' data-src="/images/home/section6-right.svg" alt="">
   {{ end }}
 </section>
 
 <script>
   var bindMouseLeftLi = function() {
-    $('.left-li').mouseenter(function() {
+    $('.section-3 .left-li').mouseenter(function() {
       var index = Number($(this).data('index'))
       $('.left-li').removeClass('active')
       $(this).addClass('active')
-      $('.right-div').hide().eq(index).show()
+      $('.section-3 .right-div').hide().eq(index).show()
     })
   }
 

layouts/partials/footer.html

@@ -4,7 +4,7 @@
         <div class="footer-main common-layout">
             <div class="up-main">
                 <div class="left-div">
-                    <img src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="foot-logo">
+                    <img data-src="{{ .Site.Params.logo | relURL }}" alt="{{ .Site.Title }}" class="foot-logo">
                     <p>{{ i18n "introduction7" }}</p>
                     <div>
                         <form 
@@ -45,7 +45,7 @@
                         {{ "/static/images/footer/wechat.svg" | readFile | safeHTML }}
                         <div class="hide-div">
                             <p>Follow the official account</p>
-                            <img src="/images/footer/wechat_code.svg" alt="">
+                            <img data-src="/images/footer/wechat_code.svg" alt="">
                         </div>
                     </a>
                     <!-- <a class='wechat' href="javascript:void(0);">
@@ -103,6 +103,31 @@
         return reg.test(email)
     }
 
+    var lazyLoad = function(allImg, imgNum) {
+        for (var i = 0; i < imgNum; i++) {
+            var img = allImg.eq(i)
+            var loaded = img.attr("data-loaded");
+            if (loaded) {
+                continue
+            }
+            if (img.offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
+                var src = img.attr("data-src")
+                img.attr("src", src)
+                img.attr("data-loaded", true)
+            }
+        }
+    }
+
+    var bindLayLoad = function() {
+        var allImg = $('img')
+        var imgNum = allImg.length
+        lazyLoad(allImg, imgNum)
+        $(window).scroll(function() {
+            lazyLoad(allImg, imgNum)
+        });
+    }
+
+    bindLayLoad()
     bindSubmit()
     bindHideMessage()
 </script>

layouts/partials/header.html

@@ -3,7 +3,7 @@
     <div class="common-layout">
         <div class="header-container">
             <a href="{{ site.Home.RelPermalink }}">
-                <img src="/images/header/logo.svg" alt="{{ .Site.Title }}" class="logo">
+                <img data-src="/images/header/logo.svg" alt="{{ .Site.Title }}" class="logo">
             </a>
 
             <ul class="nav">
@@ -49,12 +49,12 @@
                 <ul>
                     <li class="language-menu">
                         <div>
-                            <img src="/images/header/black.svg" alt="">
+                            <img data-src="/images/header/black.svg" alt="">
                             <span>{{ .Site.Language.LanguageName }}</span>
                         </div>
                         <ul class="dropdown-menu">
                             {{ range .Page.AllTranslations }}
-                            <li onclick="location = '{{ .Permalink }}'">{{ .Language.LanguageName }}</li>
+                            <li onclick="location = '{{ .RelPermalink }}'">{{ .Language.LanguageName }}</li>
                             {{ end }}
                         </ul>
                     </li>
@@ -74,7 +74,7 @@
                         <a class='link-3' href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer"></a>
                     </li>
                     <li class="menu-icon">
-                        <img src="/images/header/menu.svg" alt="">
+                        <img data-src="/images/header/menu.svg" alt="">
                     </li>
                 </ul>
             </div>
@@ -118,13 +118,13 @@
         </div>
         <div class="link-div">
             <a href="{{ .Site.Params.slackLink }}" target="_blank" rel="noopener noreferrer">
-                <img src="/images/header/slack-hover.svg" alt="">
+                <img data-src="/images/header/slack-hover.svg" alt="">
             </a>
             <a href="{{ .Site.Params.twitterLink }}" target="_blank" rel="noopener noreferrer">
-                <img src="/images/header/twitter-hover.svg" alt="">
+                <img data-src="/images/header/twitter-hover.svg" alt="">
             </a>
             <a href="{{ .Site.Params.githubLink }}" target="_blank" rel="noopener noreferrer">
-                <img src="/images/header/github-hover.svg" alt="">
+                <img data-src="/images/header/github-hover.svg" alt="">
             </a>
         </div>
     </div>

layouts/partner/list.html

@@ -15,32 +15,32 @@
         <div class="left-div">
             <div class="common-content">{{ .title }}</div>
             <p class="common-p">{{ .content }}</p>
-            <img class='img-1' src="{{ .bg2 | relURL }}" alt="">
-            <img class='img-2' src="{{ .bg3 | relURL }}" alt="">
+            <img class='img-1' data-src="{{ .bg2 | relURL }}" alt="">
+            <img class='img-2' data-src="{{ .bg3 | relURL }}" alt="">
         </div>
         <div class="right-div">
-            <img src="{{ .mapImage | relURL }}" alt="">
+            <img data-src="{{ .mapImage | relURL }}" alt="">
             <div class='btn-div div-1'>
                 <p>{{ .name1 }}</p>
                 <div>
-                    <img src="{{ .icon1 | relURL }}" alt="">
+                    <img data-src="{{ .icon1 | relURL }}" alt="">
                 </div>
             </div>
             <div class='btn-div div-2'>
                 <p>{{ .name2 }}</p>
                 <div>
-                    <img src="{{ .icon2 | relURL }}" alt="">
+                    <img data-src="{{ .icon2 | relURL }}" alt="">
                 </div>
             </div>
             <div class='btn-div div-3'>
                 <p>{{ .name3 }}</p>
                 <div>
-                    <img src="{{ .icon3 | relURL }}" alt="">
+                    <img data-src="{{ .icon3 | relURL }}" alt="">
                 </div>
             </div>
         </div>
     </div>
-    <img src="{{ .bg1 | relURL }}" alt="">
+    <img data-src="{{ .bg1 | relURL }}" alt="">
     {{ end }}
 </section>
 
@@ -71,7 +71,7 @@
         <ul class="partner-ul">
             {{ range .featuredPartnerList }}
                 <li>
-                    <img src="{{ .icon | relURL }}" alt="">
+                    <img data-src="{{ .icon | relURL }}" alt="">
                     <div class='type'>{{ .partnerType }}</div>
                     <div class='content'>{{ .content }}</div>
                 </li>

layouts/partner/request.html

@@ -15,32 +15,32 @@
         <div class="left-div">
             <div class="common-content">{{ .title }}</div>
             <p class="common-p">{{ .content }}</p>
-            <img class='img-1' src="{{ .bg2 | relURL }}" alt="">
-            <img class='img-2' src="{{ .bg3 | relURL }}" alt="">
+            <img class='img-1' data-src="{{ .bg2 | relURL }}" alt="">
+            <img class='img-2' data-src="{{ .bg3 | relURL }}" alt="">
         </div>
         <div class="right-div">
-            <img src="{{ .mapImage | relURL }}" alt="">
+            <img data-src="{{ .mapImage | relURL }}" alt="">
             <div class='btn-div div-1'>
                 <p>{{ .name1 }}</p>
                 <div>
-                    <img src="{{ .icon1 | relURL }}" alt="">
+                    <img data-src="{{ .icon1 | relURL }}" alt="">
                 </div>
             </div>
             <div class='btn-div div-2'>
                 <p>{{ .name2 }}</p>
                 <div>
-                    <img src="{{ .icon2 | relURL }}" alt="">
+                    <img data-src="{{ .icon2 | relURL }}" alt="">
                 </div>
             </div>
             <div class='btn-div div-3'>
                 <p>{{ .name3 }}</p>
                 <div>
-                    <img src="{{ .icon3 | relURL }}" alt="">
+                    <img data-src="{{ .icon3 | relURL }}" alt="">
                 </div>
             </div>
         </div>
     </div>
-    <img src="{{ .bg1 | relURL }}" alt="">
+    <img data-src="{{ .bg1 | relURL }}" alt="">
     {{ end }}
 </section>
 

layouts/projects/list.html

@@ -17,7 +17,7 @@
                 {{ $name := .name }}
                 {{ range .children }}
                 <li data-name="{{ $name }}">
-                    <img src="{{ .icon | relURL }}" alt="">
+                    <img data-src="{{ .icon | relURL }}" alt="">
                     <a href="{{ .link }}" target="_blank" rel="noopener noreferrer">{{ .title }}</a>
                     <p>{{ .description }}</p>
                     <div>

layouts/videos/list.html

@@ -98,8 +98,8 @@
     }
 
     var createVideoLi = function(video) {
-        var img = '<img src="' + video.snapshot + '" alt="">'
-        var button = '<img class="btn" src="/images/videos/play.svg" alt="">'
+        var img = '<img data-src="' + video.snapshot + '" alt="">'
+        var button = '<img data-class="btn" src="/images/videos/play.svg" alt="">'
         var title = '<h3>' + video.title + '</h3>'
         var group = '<p>' + video.group + '</p>'
         var time = '<p class="time">' + video.createTime + '</p>'

static/js/aside.js

@@ -11,17 +11,21 @@ var getElementBottomToTop = function(element) {
 }
 
 var bindAsideScroll = function() {
+  var screenWidth = $(window).width()
+  if (screenWidth <= 768) {
+    return false
+  }
   var content = $('.main-div')
   var aside = $('.aside')
   $( window ).scroll(function() {
-      var s1 = getElementBottomToTop(content)
-      var s2 = getElementBottomToTop(aside)
-      if (s2 > s1) {
-          aside.addClass('aside-absolute').removeClass('aside-fixed')
-      }
-      if (getElementTopToScreenTop(aside) > 150) {
-          aside.removeClass('aside-absolute').addClass('aside-fixed')
-      }
+    var s1 = getElementBottomToTop(content)
+    var s2 = getElementBottomToTop(aside)
+    if (s2 > s1) {
+        aside.addClass('aside-absolute').removeClass('aside-fixed')
+    }
+    if (getElementTopToScreenTop(aside) > 150) {
+        aside.removeClass('aside-absolute').addClass('aside-fixed')
+    }
   });
 }