From cfe0fe791d5e9fb24f76905cd6f76ff8d2e884ba Mon Sep 17 00:00:00 2001
From: "1152958806@qq.com" <1152958806@qq.com>
Date: Sat, 19 Aug 2023 03:38:00 +0800
Subject: [PATCH] =?UTF-8?q?=E6=87=92=E5=8A=A0=E8=BD=BD=E5=9B=BE=E7=89=87?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 settings.yaml                                 |  19 ++
 templates/album.html                          |  11 +-
 templates/macro/content-links.html            |  35 +--
 templates/modules/head.html                   |   2 +-
 templates/modules/layouts/layout.html         |   4 +-
 templates/modules/post-list.html              |   5 +-
 templates/modules/post/relatedPosts.html      |  10 +-
 .../modules/widgets/about-widgets/game.html   |   5 +-
 .../modules/widgets/aside/friend-link.html    |   8 +-
 templates/modules/widgets/aside/profile.html  |  15 +-
 .../modules/widgets/aside/recent-posts.html   |   5 +-
 templates/modules/widgets/banner-group.html   | 210 +++++++++++++++---
 templates/modules/widgets/top-group.html      |  12 +-
 templates/moments.html                        |   5 +-
 templates/photos.html                         |  10 +-
 templates/post.html                           |  10 +-
 16 files changed, 282 insertions(+), 84 deletions(-)

diff --git a/settings.yaml b/settings.yaml
index abbfc9cd..0e75c752 100644
--- a/settings.yaml
+++ b/settings.yaml
@@ -2661,6 +2661,25 @@ spec:
               validation: required
               value: 'https://npm.onmicrosoft.cn/hao-theme-static@1.3.0/templates/assets'
               help: '默认为npmJs的onmicrosoft加速地址，如果你有自己的cdn地址（请确保链接下assets文件夹下主题静态资源文件），可以填写，否则请勿修改！ '
+        - $formkit: group
+          name: vanillaLazyload
+          label: 懒加载
+          value:
+            enable: true
+            errorImg: "/themes/theme-hao/assets/images/404.gif"
+          children:
+            - $formkit: radio
+              name: enable
+              options:
+                - label: 启用
+                  value: true
+                - label: 禁用
+                  value: false
+            - $formkit: attachment
+              name: errorImg
+              label: 图片加载失败图
+              validation: required
+              placeholder: 请输入图片 url
         - $formkit: group
           name: diytitle
           label: 动态标题
diff --git a/templates/album.html b/templates/album.html
index 2c8e9af3..2f333b39 100644
--- a/templates/album.html
+++ b/templates/album.html
@@ -24,9 +24,10 @@
                         <th:block th:each="group : ${photoFinder.groupBy()}">
                             <div class="card" th:onclick="go([[${group.metadata.name}]])">
                                 <img class="card_cover"
-                                     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                     th:data-lazy-src="${#annotations.get(group, 'cover')}">
+                                     th:src="${isLazyload ? dataImage : #annotations.get(group, 'cover')}"
+                                     th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}"
+                                     >
                                 <div class="card__content">
                                     <p class="card__category" th:text="${group.spec.displayName}"></p>
                                     <h3 class="card__heading" th:text="${#annotations.get(group, 'description')}"></h3>
@@ -44,9 +45,11 @@
                         <th:block th:each="group : ${photoFinder.groupBy()}">
                             <figure class="gallery-group">
                                 <img class="gallery-group-img no-lightbox"
-                                     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                     th:data-lazy-src="${#annotations.get(group, 'cover')}" alt="Group Image Gallery">
+                                     th:src="${isLazyload ? dataImage : #annotations.get(group, 'cover')}"
+                                     th:data-lazy-src="${ isLazyload ? #annotations.get(group, 'cover') : ''}"
+
+                                     alt="Group Image Gallery">
                                 <figcaption>
                                     <div class="gallery-group-name">[[${group.spec.displayName}]]</div>
                                     <p>[[${#annotations.get(group, 'description')}]]</p><a target="_blank"
diff --git a/templates/macro/content-links.html b/templates/macro/content-links.html
index 14179fc4..99960dbc 100644
--- a/templates/macro/content-links.html
+++ b/templates/macro/content-links.html
@@ -24,11 +24,19 @@
                                 <a class="tags-group-icon" target="_blank" th:href="${linkOdd.spec.url}"
                                    th:title="${linkOdd.spec.displayName}"
                                    th:with="linkOdd = ${group.links.get(iterStat.index - 1)}">
-                                    <img th:src="@{${linkOdd.spec.logo}}" th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''" th:title="${linkOdd.spec.displayName}">
+                                    <img th:with=" img = @{${linkOdd.spec.logo}}"
+                                         th:src="${isLazyload ? dataImage : img}"
+                                         th:data-lazy-src="${ isLazyload ? img : ''}"
+                                         th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                         th:title="${linkOdd.spec.displayName}">
                                 </a>
                                 <a class="tags-group-icon" target="_blank" th:href="${linkEven.spec.url}"
                                    th:title="${linkEven.spec.displayName}" th:with="linkEven = ${link}">
-                                    <img th:src="@{${linkEven.spec.logo}}" th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''" th:title="${linkEven.spec.displayName}">
+                                    <img th:with="img = @{${linkEven.spec.logo}}"
+                                         th:src="${isLazyload ? dataImage : img}"
+                                         th:data-lazy-src="${ isLazyload ? img : ''}"
+                                         th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                         th:title="${linkEven.spec.displayName}">
                                 </a>
                             </div>
                         </th:block>
@@ -87,18 +95,19 @@
 
                         <a class="img" target="_blank" th:href="${link.spec.url}" th:title="${link.spec.displayName}">
                             <img class="flink-avatar" style="pointer-events: none;" th:alt="${link.spec.displayName}"
-                                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                 th:with="img = @{${#strings.isEmpty(#annotations.get(link, 'siteshot')) ? link.spec.logo : #annotations.get(link,'siteshot') }}"
                                  th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                 th:data-lazy-src="@{${#strings.isEmpty(#annotations.get(link, 'siteshot')) ? link.spec.logo : #annotations.get(link,'siteshot') }}">
+                                 th:src="${isLazyload ? dataImage : img}"
+                                 th:data-lazy-src="${ isLazyload ? img : ''}">
                         </a>
 
                         <a class="info cf-friends-link" target="_blank" th:href="${link.spec.url}"
                            th:title="${link.spec.displayName}">
                             <div class="site-card-avatar">
                                 <img class="flink-avatar cf-friends-avatar" th:alt="${link.spec.displayName}"
-                                     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                     th:data-lazy-src="${link.spec.logo}">
+                                     th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                     th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
                             </div>
                             <div class="site-card-text">
                                 <span class="title cf-friends-name" th:text="${link.spec.displayName}"></span>
@@ -120,16 +129,16 @@
                         <a class="cf-friends-link" rel="external nofollow" target="_blank" th:href="${link.spec.url}"
                            th:title="${link.spec.displayName}">
                             <img class="flink-avatar cf-friends-avatar" th:alt="${link.spec.displayName}"
-                                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                  th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                 th:data-lazy-src="${link.spec.logo}">
+                                 th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                 th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
                             <div class="flink-item-info">
                                 <span class="flink-item-name cf-friends-name" th:text="${link.spec.displayName}"></span>
                                 <span class="flink-item-desc" th:text="${link.spec.description}"
                                       th:title="${link.spec.description}"></span>
-                                <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
-                                     th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                     th:data-lazy-src="${link.spec.logo}">
+                                <img th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                     th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                     th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}">
                             </div>
                         </a>
                     </div>
@@ -141,9 +150,9 @@
                         <a class="cf-friends-link" rel="external nofollow" target="_blank" th:href="${link.spec.url}"
                            th:title="${link.spec.displayName}">
                             <img class="flink-avatar cf-friends-avatar"
-                                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                  th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                 th:data-lazy-src="${link.spec.logo}"
+                                 th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                 th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
                                  th:alt="${link.spec.displayName}">
                             <div class="img-alt is-center">[[${link.spec.displayName}]]</div>
                             <div class="flink-item-info">
diff --git a/templates/modules/head.html b/templates/modules/head.html
index c891cc29..ef691471 100644
--- a/templates/modules/head.html
+++ b/templates/modules/head.html
@@ -197,7 +197,7 @@
             postUpdate: '2022-11-04 20:08:15',
             copyright: undefined,
             lightbox: 'fancybox',
-            lazyload: {enable: true, error: "/themes/theme-hao/assets/images/404.gif"},
+            lazyload: {enable: [[${theme.config.other.vanillaLazyload.enable}]], error: "/themes/theme-hao/assets/images/404.gif"},
             isFriendLinksInFooter: [[${theme.config.footer.footer_group.enable_footer_group}]],
             loadingBox: [[${theme.config.other.loadingBoxs.loadingBoxEnable}]],
             loadProgressBar: [[${theme.config.other.loadingBoxs.loadProgressBar}]],
diff --git a/templates/modules/layouts/layout.html b/templates/modules/layouts/layout.html
index 40ee470f..77868c01 100644
--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@@ -4,7 +4,9 @@
       theme.config.other.staticResource.use == 'cbd' ? 'https://cdn.cbd.int/hao-theme-static@' + theme.spec.version +'/templates/assets' :
       theme.config.other.staticResource.use == 'custom' ? theme.config.other.staticResource.cdn_link : #theme.assets('/')},
       theme_version = ${ theme.config.other.staticResource.use == 'local' ? '?v='+ theme.spec.version : ''},
-      errorImg = '/themes/theme-hao/assets/images/404.gif'">
+      errorImg = @{${theme.config.other.vanillaLazyload.errorImg}},
+      isLazyload = ${theme.config.other.vanillaLazyload.enable},
+      dataImage = 'data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7'">
 
 <!-- head 中自定义的  -->
 
diff --git a/templates/modules/post-list.html b/templates/modules/post-list.html
index 6540e25d..36e4e4f4 100644
--- a/templates/modules/post-list.html
+++ b/templates/modules/post-list.html
@@ -16,10 +16,11 @@
         <div class="post_cover left_radius">
             <a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
                 <img class="post_bg"
+                     th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
                      th:alt="${post.spec.title}"
-                     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                      th:attr="onerror='this.onerror=null;this.src=\''+@{${errorImg}}+'\''"
-                     th:data-lazy-src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'>
+                     th:data-lazy-src="${ isLazyload ? img : ''}"
+                     th:src="${isLazyload ? dataImage : img}">
             </a>
         </div>
         <!-- 类别非空时 -->
diff --git a/templates/modules/post/relatedPosts.html b/templates/modules/post/relatedPosts.html
index 9b13dd80..317168df 100644
--- a/templates/modules/post/relatedPosts.html
+++ b/templates/modules/post/relatedPosts.html
@@ -17,9 +17,10 @@ containsTitle = ${#strings.contains(recommandPosts,post.spec.title)}">
                 <div th:if="${!containsTitle ? iterStat.index <6 : true}">
                     <a th:href="@{${recommandPost.status.permalink}}" th:title="${recommandPost.spec.title}">
                         <img alt="cover" class="cover" id="preimg"
-                             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                             th:with="img = ${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:data-lazy-src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}">
                         <div class="content is-center">
                             <div class="date" style="color: white"><i class="far fa-calendar-alt fa-fw"></i>
                                 [[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd')}]]
@@ -37,9 +38,10 @@ containsTitle = ${#strings.contains(recommandPosts,post.spec.title)}">
                 <div th:if="${!containsTitle ? iterStat.index <2 : true}">
                     <a th:href="@{${recommandPost.status.permalink}}" th:title="${recommandPost.spec.title}">
                         <img class="cover" alt="cover"
-                             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                             th:with="img = ${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}"
                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                             th:data-lazy-src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}">
                         <div class="content is-center">
                             <div class="date"><i class="far fa-calendar-alt fa-fw"></i>
                                 [[${#dates.format(recommandPost.spec.publishTime,'yyyy-MM-dd')}]]</div>
diff --git a/templates/modules/widgets/about-widgets/game.html b/templates/modules/widgets/about-widgets/game.html
index 42913005..721ee19d 100644
--- a/templates/modules/widgets/about-widgets/game.html
+++ b/templates/modules/widgets/about-widgets/game.html
@@ -39,9 +39,10 @@
                     th:href="${comic.url}"
                     rel="external nofollow noreferrer" target="_blank" th:title="${comic.title}" draggable="false">
                     <div class="comic-item-cover"><img
-                            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                            th:with="img = @{${comic.bg}}"
                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                            th:data-lazy-src="@{${comic.bg}}"
+                            th:src="${isLazyload ? dataImage : img}"
+                            th:data-lazy-src="${ isLazyload ? img : ''}"
                             th:alt="${comic.title}"
                             draggable="false" >
                     </div>
diff --git a/templates/modules/widgets/aside/friend-link.html b/templates/modules/widgets/aside/friend-link.html
index f6803c6a..3a5c9846 100644
--- a/templates/modules/widgets/aside/friend-link.html
+++ b/templates/modules/widgets/aside/friend-link.html
@@ -17,9 +17,9 @@
                 <a th:each="link : ${group.links}"
                    class="card-friend-item online-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
                    target="_blank"><img class="no-lightbox card-friend-avatar"
-                                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                         th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                        th:data-lazy-src="${link.spec.logo}"
+                                        th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                        th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
                                         th:alt="${link.spec.displayName}">
                     <div class="card-friend-details">
                         <div class="card-friend-name">[[${link.spec.displayName}]]</div>
@@ -36,9 +36,9 @@
                 <a th:each="link : ${group.links}"
                    class="card-friend-item offline-friend-link" th:href="${link.spec.url}" th:title="${link.spec.displayName}"
                    target="_blank"><img class="no-lightbox card-friend-avatar"
-                                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                                         th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                        th:data-lazy-src="${link.spec.logo}"
+                                        th:src="${isLazyload ? dataImage : link.spec.logo}"
+                                        th:data-lazy-src="${ isLazyload ? link.spec.logo : ''}"
                                         th:alt="${link.spec.displayName}">
                     <div class="card-friend-details">
                         <div class="card-friend-name">[[${link.spec.displayName}]]</div>
diff --git a/templates/modules/widgets/aside/profile.html b/templates/modules/widgets/aside/profile.html
index 650fd945..3270f98a 100644
--- a/templates/modules/widgets/aside/profile.html
+++ b/templates/modules/widgets/aside/profile.html
@@ -13,9 +13,10 @@
                     <div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！我是
                     </div>
                     <img class="avatar-img"
-                         src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                         th:with=" img = @{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"
                          th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                         th:data-lazy-src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
+                         th:src="${isLazyload ? dataImage : img}"
+                         th:data-lazy-src="${ isLazyload ? img : ''}">
                 </div>
                 <div class="author-info__name" th:if="${#strings.isEmpty(theme.config.sidebar.profile.profileName)}"
                      th:text="${site.title}"></div>
@@ -144,14 +145,16 @@
             </div>
             <div class="avatar-img-group">
                 <img class="avatar-img" alt="avatar"
-                     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                     th:with="img = @{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}"
                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                     th:data-lazy-src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
+                     th:src="${isLazyload ? dataImage : img}"
+                     th:data-lazy-src="${ isLazyload ? img : ''}">
                 <div class="avatar-sticker">
                     <img class="avatar-sticker-img" alt="avatar"
-                         src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                         th:with="img = @{${theme.config.sidebar.profile.stickerImg}}"
                          th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                         th:data-lazy-src="@{${theme.config.sidebar.profile.stickerImg}}">
+                         th:src="${isLazyload ? dataImage : img}"
+                         th:data-lazy-src="${ isLazyload ? img : ''}">
                 </div>
             </div>
             <div class="author-info__description_group" th:utext="${theme.config.sidebar.profile.profileDesc}">
diff --git a/templates/modules/widgets/aside/recent-posts.html b/templates/modules/widgets/aside/recent-posts.html
index 722ab988..e1d1c215 100644
--- a/templates/modules/widgets/aside/recent-posts.html
+++ b/templates/modules/widgets/aside/recent-posts.html
@@ -8,9 +8,10 @@
         <div class="aside-list-item" th:each="post : ${posts}">
             <a class="thumbnail" th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
                 <img th:alt="${post.spec.title}"
-                     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                     th:with="img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}"
                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                     th:data-lazy-src="${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}">
+                     th:src="${isLazyload ? dataImage : img}"
+                     th:data-lazy-src="${ isLazyload ? img : ''}">
             </a>
             <div class="content">
                 <a class="title" th:href="@{${post.status.permalink}}" th:text="${post.spec.title}" th:title="${post.spec.title}"></a>
diff --git a/templates/modules/widgets/banner-group.html b/templates/modules/widgets/banner-group.html
index f165079d..ca27b4b4 100644
--- a/templates/modules/widgets/banner-group.html
+++ b/templates/modules/widgets/banner-group.html
@@ -19,114 +19,254 @@
             <div class="tags-group-wrapper" th:if="${#strings.equals(theme.config.top.BannerLeft.bannersBackground, 'default')}">
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#989bf8">
-                        <img th:src="${assets_link + '/images/icons/AfterEffect.png'}" title="AfterEffect">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/AfterEffect.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="AfterEffect">
                     </div>
                     <div class="tags-group-icon" style="background:#fff">
-                        <img th:src="${assets_link + '/images/icons/Sketch.png'}" title="Sketch">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Sketch.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Sketch">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#57b6e6">
-                        <img th:src="${assets_link + '/images/icons/Docker.png'}" title="Docker">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Docker.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Docker">
                     </div>
                     <div class="tags-group-icon" style="background:#4082c3">
-                        <img th:src="${assets_link + '/images/icons/Photoshop.png'}" title="Photoshop">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Photoshop.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Photoshop">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#fff">
-                        <img th:src="${assets_link + '/images/icons/FinalCutPro.png'}" title="FinalCutPro">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/FinalCutPro.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="FinalCutPro">
                     </div>
                     <div class="tags-group-icon" style="background:#fff">
-                        <img th:src="${assets_link + '/images/icons/Python.png'}" title="Python">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Python.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Python">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#eb6840">
-                        <img th:src="${assets_link + '/images/icons/Swift.png'}" title="Swift">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Swift.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Swift">
                     </div>
                     <div class="tags-group-icon" style="background:#8f55ba">
-                        <img th:src="${assets_link + '/images/icons/Principle.png'}" title="Principle">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Principle.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Principle">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#f29e39">
-                        <img th:src="${assets_link + '/images/icons/illustrator.png'}" title="illustrator">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/illustrator.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="illustrator">
                     </div>
                     <div class="tags-group-icon" style="background:#2c51db">
-                        <img th:src="${assets_link + '/images/icons/CSS3.png'}" title="CSS3">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/CSS3.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="CSS3">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#f7cb4f">
-                        <img th:src="${assets_link + '/images/icons/JS.png'}" title="JS">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/JS.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="JS">
                     </div>
                     <div class="tags-group-icon" style="background:#e9572b">
-                        <img th:src="${assets_link + '/images/icons/HTML.png'}" title="HTML">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/HTML.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="HTML">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#df5b40">
-                        <img th:src="${assets_link + '/images/icons/Git.webp'}" title="Git">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Git.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Git">
                     </div>
                     <div class="tags-group-icon" style="background:#e65164">
-                        <img th:src="${assets_link + '/images/icons/Apifox.webp'}" title="Apifox">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Apifox.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Apifox">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#989bf8">
-                        <img th:src="${assets_link + '/images/icons/AfterEffect.png'}" title="AfterEffect">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/AfterEffect.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="AfterEffect">
                     </div>
                     <div class="tags-group-icon" style="background:#fff">
-                        <img th:src="${assets_link + '/images/icons/Sketch.png'}" title="Sketch">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Sketch.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Sketch">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#57b6e6">
-                        <img th:src="${assets_link + '/images/icons/Docker.png'}" title="Docker">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Docker.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Docker">
                     </div>
                     <div class="tags-group-icon" style="background:#4082c3">
-                        <img th:src="${assets_link + '/images/icons/Photoshop.png'}" title="Photoshop">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Photoshop.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Photoshop">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#fff">
-                        <img th:src="${assets_link + '/images/icons/FinalCutPro.png'}" title="FinalCutPro">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/FinalCutPro.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="FinalCutPro">
                     </div>
                     <div class="tags-group-icon" style="background:#fff">
-                        <img th:src="${assets_link + '/images/icons/Python.png'}" title="Python">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Python.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Python">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#eb6840">
-                        <img th:src="${assets_link + '/images/icons/Swift.png'}" title="Swift">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Swift.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Swift">
                     </div>
                     <div class="tags-group-icon" style="background:#8f55ba">
-                        <img th:src="${assets_link + '/images/icons/Principle.png'}" title="Principle">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Principle.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Principle">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#f29e39">
-                        <img th:src="${assets_link + '/images/icons/illustrator.png'}" title="illustrator">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/illustrator.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="illustrator">
                     </div>
                     <div class="tags-group-icon" style="background:#2c51db">
-                        <img th:src="${assets_link + '/images/icons/CSS3.png'}" title="CSS3">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/CSS3.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="CSS3">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#f7cb4f">
-                        <img th:src="${assets_link + '/images/icons/JS.png'}" title="JS">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/JS.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="JS">
                     </div>
                     <div class="tags-group-icon" style="background:#e9572b">
-                        <img th:src="${assets_link + '/images/icons/HTML.png'}" title="HTML">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/HTML.png'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="HTML">
                     </div>
                 </div>
                 <div class="tags-group-icon-pair">
                     <div class="tags-group-icon" style="background:#df5b40">
-                        <img th:src="${assets_link + '/images/icons/Git.webp'}" title="Git">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Git.webp'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Git">
                     </div>
                     <div class="tags-group-icon" style="background:#e65164">
-                        <img th:src="${assets_link + '/images/icons/Apifox.webp'}" title="Apifox">
+                        <img
+                             th:with=" img = ${assets_link + '/images/icons/Apifox.webp'}"
+                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                             th:src="${isLazyload ? dataImage : img}"
+                             th:data-lazy-src="${ isLazyload ? img : ''}"
+                             title="Apifox">
                     </div>
                 </div>
             </div>
@@ -140,13 +280,23 @@
                         <div class="tags-group-icon"
                              th:style="'background:' + ${techOdd.background}"
                              th:with="techOdd = ${techs.get(iterStat.index - 1)}">
-                            <img th:src="@{${techOdd.url}}" th:title="${techOdd.name}">
+                            <img
+                                    th:with=" img = @{${techOdd.url}}"
+                                    th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                    th:src="${isLazyload ? dataImage : img}"
+                                    th:data-lazy-src="${ isLazyload ? img : ''}"
+                                    th:title="${techOdd.name}">
                         </div>
 
                         <div class="tags-group-icon"
                              th:style="'background:' + ${techEven.background}"
                              th:with="techEven = ${tech}">
-                            <img th:src="@{${techEven.url}}" th:title="${techEven.name}">
+                            <img
+                                 th:with=" img = @{${techEven.url}}"
+                                 th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                 th:src="${isLazyload ? dataImage : img}"
+                                 th:data-lazy-src="${ isLazyload ? img : ''}"
+                                 th:title="${techEven.name}">
                         </div>
                     </div>
                 </th:block>
diff --git a/templates/modules/widgets/top-group.html b/templates/modules/widgets/top-group.html
index 87a02daa..862482c7 100644
--- a/templates/modules/widgets/top-group.html
+++ b/templates/modules/widgets/top-group.html
@@ -14,10 +14,12 @@
                 <span class="recent-post-top-text"
                       th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'">荐</span>
                 <img class="post_bg"
+                     th:with=' img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
                      th:alt="${post.spec.title}"
-                     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                      th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                     th:data-lazy-src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
+                     th:src="${isLazyload ? dataImage : img}"
+                     th:data-lazy-src="${ isLazyload ? img : ''}"
+
                 />
             </a>
         </div>
@@ -39,10 +41,12 @@
                     <span class="recent-post-top-text"
                           th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'">荐</span>
                     <img class="post_bg"
+                         th:with='img = ${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
                          th:alt="${post.spec.title}"
-                         src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
                          th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                         th:data-lazy-src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
+                         th:src="${isLazyload ? dataImage : img}"
+                         th:data-lazy-src="${ isLazyload ? img : ''}"
+
                     />
                 </a>
             </div>
diff --git a/templates/moments.html b/templates/moments.html
index ca24df7f..6670d0b5 100644
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -32,9 +32,10 @@
                                     <div class="bber-container-img" th:if="${#strings.contains(content.medium,'PHOTO')}">
                                         <img th:each="momentItem : ${content.medium}"
                                              th:if="${momentItem.type.name == 'PHOTO'}"
-                                             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                             th:src="${isLazyload ? dataImage : momentItem.url}"
+                                             th:data-lazy-src="${ isLazyload ? momentItem.url : ''}"
                                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                             th:data-lazy-src="${momentItem.url}" title="瞬间配图">
+                                             title="瞬间配图">
                                         <div class="bber-content-noimg"></div>
                                         <div class="bber-content-noimg"></div>
                                         <div class="bber-content-noimg"></div>
diff --git a/templates/photos.html b/templates/photos.html
index 894eab10..871b3952 100644
--- a/templates/photos.html
+++ b/templates/photos.html
@@ -30,10 +30,10 @@
                                     <div class="fj-gallery-item"
                                          th:each="photo : ${photoFinder.listBy(param.photo_group_name)}">
                                         <div th:if="${theme.config.photos.tagEnable}" class="tag-address">[[${photo.spec.displayName}]]</div>
-                                        <img th:title="${photo.spec.description}"
-                                             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                        <img th:src="${isLazyload ? dataImage : photo.spec.url}"
+                                             th:title="${photo.spec.description}"
                                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                             th:data-lazy-src="${photo.spec.url}"
+                                             th:data-lazy-src="${ isLazyload ? photo.spec.url : ''}"
                                              th:alt="${photo.spec.description}">
 
                                     </div>
@@ -56,8 +56,8 @@
                                     <div class="fj-gallery-item"
                                          th:each="photo : ${photoFinder.listBy(param.photo_group_name)}">
                                         <div th:if="${theme.config.photos.tagEnable}" class="tag-address">[[${photo.spec.displayName}]]</div>
-                                        <img th:data-lazy-src="${photo.spec.url}"
-                                             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                        <img th:src="${isLazyload ? dataImage : photo.spec.url}"
+                                             th:data-lazy-src="${ isLazyload ? photo.spec.url : ''}"
                                              th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
                                              th:alt="${photo.spec.description}"
                                              th:title="${photo.spec.description}">
diff --git a/templates/post.html b/templates/post.html
index c7aa88d1..a13eedb2 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -124,9 +124,10 @@
                     <div th:class="${postCursor.hasPrevious()==true && postCursor.hasNext()==false} ? 'prev-post2 pull-left postcarnepre' : 'prev-post pull-left'">
                         <a th:if="${postCursor.hasPrevious()}" th:href="@{${postCursor.previous.status.permalink}}">
                             <img alt="cover" id="preimg" class="nolazyload"
-                                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                 th:with="img = ${#strings.isEmpty(postCursor.previous.spec.cover) ? theme.config.layout.postRandomImg : postCursor.previous.spec.cover}"
+                                 th:src="${isLazyload ? dataImage : img}"
                                  th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                 th:data-lazy-src="${#strings.isEmpty(postCursor.previous.spec.cover) ? theme.config.layout.postRandomImg : postCursor.previous.spec.cover}">
+                                 th:data-lazy-src="${ isLazyload ? img : ''}">
                             <div class="pagination-info">
                                 <div class="label">上一篇</div>
                                 <div class="prev_info" th:text="${postCursor.previous.spec.title}"></div>
@@ -136,9 +137,10 @@
                     <div th:class="${postCursor.hasPrevious()==false && postCursor.hasNext()==true} ? 'next-post2 pull-right postcarnepre':'next-post pull-right'">
                         <a th:if="${postCursor.hasNext()}" th:href="@{${postCursor.next.status.permalink}}">
                             <img alt="cover" id="preimg" class="nolazyload"
-                                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                 th:with="img = ${#strings.isEmpty(postCursor.next.spec.cover) ? theme.config.layout.postRandomImg : postCursor.next.spec.cover}"
+                                 th:src="${isLazyload ? dataImage : img}"
                                  th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
-                                 th:data-lazy-src="${#strings.isEmpty(postCursor.next.spec.cover) ? theme.config.layout.postRandomImg : postCursor.next.spec.cover}">
+                                 th:data-lazy-src="${ isLazyload ? img : ''}">
                             <div class="pagination-info">
                                 <div class="label">下一篇</div>
                                 <div class="next_info" th:text="${postCursor.next.spec.title}"></div>