From e260d29c8d0cc5694b4c6164d1804d17add90b8e Mon Sep 17 00:00:00 2001
From: liuboaibc <kukudehero@gmail.com>
Date: Mon, 22 Jun 2020 13:39:31 +0800
Subject: [PATCH] img lazyload

---
 layouts/404.html                  |  6 ++---
 layouts/_default/scenario.html    | 12 +++++-----
 layouts/blogs/list.html           |  4 ++--
 layouts/case/list.html            |  8 +++----
 layouts/case/single.html          |  8 +++----
 layouts/conferences/list.html     |  6 ++---
 layouts/contribution/list.html    | 24 +++++++++----------
 layouts/contribution/request.html |  2 +-
 layouts/docs/list.html            |  2 +-
 layouts/docs/single.html          |  2 +-
 layouts/index.html                | 38 +++++++++++++++----------------
 layouts/partials/footer.html      | 29 +++++++++++++++++++++--
 layouts/partials/header.html      | 12 +++++-----
 layouts/partner/list.html         | 16 ++++++-------
 layouts/partner/request.html      | 14 ++++++------
 layouts/projects/list.html        |  2 +-
 layouts/videos/list.html          |  4 ++--
 17 files changed, 107 insertions(+), 82 deletions(-)

diff --git a/layouts/404.html b/layouts/404.html
index 450a153bb..093beb940 100644
--- a/layouts/404.html
+++ b/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>
diff --git a/layouts/_default/scenario.html b/layouts/_default/scenario.html
index 3ce705eb2..c59bddc2c 100644
--- a/layouts/_default/scenario.html
+++ b/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>
diff --git a/layouts/blogs/list.html b/layouts/blogs/list.html
index be9d9a5f8..8479a6203 100644
--- a/layouts/blogs/list.html
+++ b/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>
diff --git a/layouts/case/list.html b/layouts/case/list.html
index af84a44b8..c95e4c8d7 100644
--- a/layouts/case/list.html
+++ b/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>
diff --git a/layouts/case/single.html b/layouts/case/single.html
index 7c51bb788..645db3688 100644
--- a/layouts/case/single.html
+++ b/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 }}
\ No newline at end of file
diff --git a/layouts/conferences/list.html b/layouts/conferences/list.html
index f51cb5f5f..cb7bec384 100644
--- a/layouts/conferences/list.html
+++ b/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>
diff --git a/layouts/contribution/list.html b/layouts/contribution/list.html
index 924828fd9..feb93cd51 100644
--- a/layouts/contribution/list.html
+++ b/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>');
         });
     }
 
diff --git a/layouts/contribution/request.html b/layouts/contribution/request.html
index 79dd9aa83..68774d99a 100644
--- a/layouts/contribution/request.html
+++ b/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 }}
\ No newline at end of file
diff --git a/layouts/docs/list.html b/layouts/docs/list.html
index 19e4c17b4..e380c721a 100644
--- a/layouts/docs/list.html
+++ b/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>
diff --git a/layouts/docs/single.html b/layouts/docs/single.html
index aaab8ee66..d5629ffee 100644
--- a/layouts/docs/single.html
+++ b/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">
diff --git a/layouts/index.html b/layouts/index.html
index d79f9bd1e..5da12dd71 100644
--- a/layouts/index.html
+++ b/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,12 +179,12 @@
     <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>
 
diff --git a/layouts/partials/footer.html b/layouts/partials/footer.html
index ec26cd06e..82a018cf9 100644
--- a/layouts/partials/footer.html
+++ b/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>
\ No newline at end of file
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index b215bd098..7ad9df8af 100644
--- a/layouts/partials/header.html
+++ b/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,7 +49,7 @@
                 <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">
@@ -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>
diff --git a/layouts/partner/list.html b/layouts/partner/list.html
index f5f97f4ab..f3036a181 100644
--- a/layouts/partner/list.html
+++ b/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>
diff --git a/layouts/partner/request.html b/layouts/partner/request.html
index 0ead7d249..922ccef01 100644
--- a/layouts/partner/request.html
+++ b/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>
 
diff --git a/layouts/projects/list.html b/layouts/projects/list.html
index 248961f24..29ffc5439 100644
--- a/layouts/projects/list.html
+++ b/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>
diff --git a/layouts/videos/list.html b/layouts/videos/list.html
index 0e2e74f26..f874c6c6e 100644
--- a/layouts/videos/list.html
+++ b/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>'