From 31c260e6ceffa2131e502b6734acd8424e9bb2d2 Mon Sep 17 00:00:00 2001
From: "1152958806@qq.com" <1152958806@qq.com>
Date: Sat, 19 Aug 2023 01:32:49 +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

---
 templates/album.html                          | 12 ++++++---
 templates/assets/js/main.js                   |  8 +++---
 templates/macro/content-links.html            | 27 +++++++++++++------
 templates/modules/head.html                   |  2 +-
 templates/modules/layouts/layout.html         |  3 ++-
 templates/modules/post-list.html              |  6 +++--
 templates/modules/post/relatedPosts.html      | 10 ++++---
 .../modules/widgets/about-widgets/game.html   | 12 +++++----
 .../modules/widgets/aside/friend-link.html    | 10 ++++---
 templates/modules/widgets/aside/profile.html  | 21 ++++++++++-----
 .../modules/widgets/aside/recent-posts.html   |  6 +++--
 templates/modules/widgets/top-group.html      | 12 ++++++---
 templates/moments.html                        |  4 ++-
 templates/photos.html                         | 12 ++++++---
 templates/post.html                           |  8 ++++--
 15 files changed, 104 insertions(+), 49 deletions(-)

diff --git a/templates/album.html b/templates/album.html
index 59f5d15f..2c8e9af3 100644
--- a/templates/album.html
+++ b/templates/album.html
@@ -23,7 +23,10 @@
                     <div class="card-album">
                         <th:block th:each="group : ${photoFinder.groupBy()}">
                             <div class="card" th:onclick="go([[${group.metadata.name}]])">
-                                <img class="card_cover entered loaded" th:src="${#annotations.get(group, 'cover')}">
+                                <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')}">
                                 <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>
@@ -39,8 +42,11 @@
                     <h2 style="text-align:center;">[[${theme.config.photos.bigTitle}]]</h2>
                     <div class="gallery-group-main">
                         <th:block th:each="group : ${photoFinder.groupBy()}">
-                            <figure class="gallery-group"><img class="gallery-group-img no-lightbox"
-                                                               th:src="${#annotations.get(group, 'cover')}" alt="Group Image Gallery">
+                            <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">
                                 <figcaption>
                                     <div class="gallery-group-name">[[${group.spec.displayName}]]</div>
                                     <p>[[${#annotations.get(group, 'description')}]]</p><a target="_blank"
diff --git a/templates/assets/js/main.js b/templates/assets/js/main.js
index 9315be98..47b6e12f 100644
--- a/templates/assets/js/main.js
+++ b/templates/assets/js/main.js
@@ -443,9 +443,7 @@ document.addEventListener('DOMContentLoaded', function () {
         window.lazyLoadInstance = new LazyLoad({
             elements_selector: 'img',
             threshold: 0,
-            callback_error: (img) => {
-                img.setAttribute("srcset", GLOBAL_CONFIG.lazyload.error);
-            }
+            data_src: 'lazy-src'
         })
     }
 
@@ -465,14 +463,14 @@ document.addEventListener('DOMContentLoaded', function () {
         })
 
         clickFnOfSubMenu()
-
+        GLOBAL_CONFIG.lazyload.enable && lazyloadImg()
         GLOBAL_CONFIG.copyright !== undefined && addCopyright()
     }
 
     window.refreshFn = function () {
         initAdjust();
 
-        GLOBAL_CONFIG.lazyload.enable && lazyloadImg()
+
         if (GLOBAL_CONFIG.isPost) {
             addRuntime();
         } else {
diff --git a/templates/macro/content-links.html b/templates/macro/content-links.html
index 8a148470..14179fc4 100644
--- a/templates/macro/content-links.html
+++ b/templates/macro/content-links.html
@@ -24,11 +24,11 @@
                                 <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:title="${linkOdd.spec.displayName}">
+                                    <img th:src="@{${linkOdd.spec.logo}}" 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:title="${linkEven.spec.displayName}">
+                                    <img th:src="@{${linkEven.spec.logo}}" th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''" th:title="${linkEven.spec.displayName}">
                                 </a>
                             </div>
                         </th:block>
@@ -79,7 +79,7 @@
                 <!-- 第一个，使用卡片展示 -->
                 <div th:if="${#strings.equals(#annotations.get(group, 'displayStyle'),'beautify') && not #lists.isEmpty(group.links)}"
                      class="site-card-group">
-                     
+
                     <div class="site-card" th:each="link : ${group.links}">
                         <span th:if="${not #strings.isEmpty(#annotations.get(link, 'label'))}"
                               th:style="'background-color:' + ${#annotations.get(link,'labelColor')}"
@@ -87,14 +87,18 @@
 
                         <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}"
-                                 th:src="@{${#strings.isEmpty(#annotations.get(link, 'siteshot')) ? link.spec.logo : #annotations.get(link,'siteshot') }}">
+                                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                 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') }}">
                         </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}"
-                                     th:src="${link.spec.logo}">
+                                     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                     th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                     th:data-lazy-src="${link.spec.logo}">
                             </div>
                             <div class="site-card-text">
                                 <span class="title cf-friends-name" th:text="${link.spec.displayName}"></span>
@@ -116,12 +120,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}"
-                                 th:src="${link.spec.logo}">
+                                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                 th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                 th:data-lazy-src="${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 th:src="${link.spec.logo}" class="entered loaded">
+                                <img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                     th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                     th:data-lazy-src="${link.spec.logo}">
                             </div>
                         </a>
                     </div>
@@ -132,7 +140,10 @@
                     <div class="flink-list-item" th:each="link : ${group.links}">
                         <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 entered loaded" th:src="${link.spec.logo}"
+                            <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: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 757f5016..c891cc29 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/404s.gif"},
+            lazyload: {enable: true, 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 b66f8ad3..40ee470f 100644
--- a/templates/modules/layouts/layout.html
+++ b/templates/modules/layouts/layout.html
@@ -3,7 +3,8 @@
       th:with="assets_link=${theme.config.other.staticResource.use == 'onmicrosoft' ? 'https://npm.onmicrosoft.cn/hao-theme-static@' + theme.spec.version +'/templates/assets' :
       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 : ''}">
+      theme_version = ${ theme.config.other.staticResource.use == 'local' ? '?v='+ theme.spec.version : ''},
+      errorImg = '/themes/theme-hao/assets/images/404.gif'">
 
 <!-- head 中自定义的  -->
 
diff --git a/templates/modules/post-list.html b/templates/modules/post-list.html
index 430a908b..6540e25d 100644
--- a/templates/modules/post-list.html
+++ b/templates/modules/post-list.html
@@ -15,9 +15,11 @@
 
         <div class="post_cover left_radius">
             <a th:attr="title=${post.spec.title}" th:href="@{${post.status.permalink}}">
-                <img class="post_bg entered loaded" loading="lazy"
+                <img class="post_bg"
                      th:alt="${post.spec.title}"
-                     th:src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'>
+                     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}'>
             </a>
         </div>
         <!-- 类别非空时 -->
diff --git a/templates/modules/post/relatedPosts.html b/templates/modules/post/relatedPosts.html
index c92074e7..9b13dd80 100644
--- a/templates/modules/post/relatedPosts.html
+++ b/templates/modules/post/relatedPosts.html
@@ -16,8 +16,10 @@ containsTitle = ${#strings.contains(recommandPosts,post.spec.title)}">
                       th:if="${not #strings.equals(post.spec.title, recommandPost.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" loading="lazy" id="preimg"
-                             th:src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
+                        <img alt="cover" class="cover" id="preimg"
+                             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                             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}">
                         <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')}]]
@@ -35,7 +37,9 @@ 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"
-                             th:src="${#strings.isEmpty(recommandPost.spec.cover) ? theme.config.layout.postRandomImg : recommandPost.spec.cover}">
+                             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                             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}">
                         <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 749f3f5c..42913005 100644
--- a/templates/modules/widgets/about-widgets/game.html
+++ b/templates/modules/widgets/about-widgets/game.html
@@ -3,12 +3,12 @@
 <!-- 爱好 -->
 <div class="author-content" th:fragment="game">
     <div class="author-content-item game-lol"
-        th:style="'background: url('+ @{${theme.config.about.game.game_bg}} +') top / cover no-repeat'">
+         th:style="'background: url('+ @{${theme.config.about.game.game_bg}} +') top / cover no-repeat'">
         <div class="card-content">
             <div class="author-content-item-tips" th:text="${theme.config.about.game.game_tips}">
 
             </div><span class="author-content-item-title"
-                th:text="${theme.config.about.game.game_title}"></span>
+                        th:text="${theme.config.about.game.game_title}"></span>
             <div class="content-bottom">
                 <div class="icon-group">
                     <div class="loading-bar" role="presentation" aria-hidden="true"></div>
@@ -18,12 +18,12 @@
         </div>
     </div>
     <div th:if="${#strings.equals(theme.config.about.game2.game2_type, 'img')}" class="author-content-item game-wolf"
-        th:style="'background: url('+ @{${theme.config.about.game2.game2_bg}} +') top / cover no-repeat'">
+         th:style="'background: url('+ @{${theme.config.about.game2.game2_bg}} +') top / cover no-repeat'">
         <div class="card-content">
             <div class="author-content-item-tips" th:text="${theme.config.about.game2.game2_tips}">
 
             </div><span class="author-content-item-title"
-                th:text="${theme.config.about.game2.game2_title}"></span>
+                        th:text="${theme.config.about.game2.game2_title}"></span>
             <div class="content-bottom">
                 <div class="tips" th:text="${theme.config.about.game2.game2_uid}"></div>
             </div>
@@ -39,7 +39,9 @@
                     th:href="${comic.url}"
                     rel="external nofollow noreferrer" target="_blank" th:title="${comic.title}" draggable="false">
                     <div class="comic-item-cover"><img
-                            th:src="@{${comic.bg}}"
+                            src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                            th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                            th:data-lazy-src="@{${comic.bg}}"
                             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 12697fa4..f6803c6a 100644
--- a/templates/modules/widgets/aside/friend-link.html
+++ b/templates/modules/widgets/aside/friend-link.html
@@ -17,7 +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"
-                                        th:src="${link.spec.logo}"
+                                        src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                        th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                        th:data-lazy-src="${link.spec.logo}"
                                         th:alt="${link.spec.displayName}">
                     <div class="card-friend-details">
                         <div class="card-friend-name">[[${link.spec.displayName}]]</div>
@@ -33,8 +35,10 @@
                 </summary>
                 <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 entered loaded"
-                                        th:src="${link.spec.logo}"
+                   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: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 705031c6..650fd945 100644
--- a/templates/modules/widgets/aside/profile.html
+++ b/templates/modules/widgets/aside/profile.html
@@ -12,8 +12,10 @@
                 <div class="author-info__top-group">
                     <div class="author-info__sayhi" id="author-info__sayhi" onclick="heo.changeSayHelloText()">你好啊！我是
                     </div>
-                    <img class="avatar-img entered loaded"
-                         th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
+                    <img class="avatar-img"
+                         src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                         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}}">
                 </div>
                 <div class="author-info__name" th:if="${#strings.isEmpty(theme.config.sidebar.profile.profileName)}"
                      th:text="${site.title}"></div>
@@ -140,10 +142,17 @@
                     </div>
                 </div>
             </div>
-            <div class="avatar-img-group"><img class="avatar-img" alt="avatar"
-                                               th:src="@{${#strings.isEmpty(site.logo) ? assets_link + '/images/hao-logo.jpg' : site.logo}}">
-                <div class="avatar-sticker"><img class="avatar-sticker-img" alt="avatar"
-                                                 th:src="@{${theme.config.sidebar.profile.stickerImg}}"></div>
+            <div class="avatar-img-group">
+                <img class="avatar-img" alt="avatar"
+                     src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                     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}}">
+                <div class="avatar-sticker">
+                    <img class="avatar-sticker-img" alt="avatar"
+                         src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                         th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                         th:data-lazy-src="@{${theme.config.sidebar.profile.stickerImg}}">
+                </div>
             </div>
             <div class="author-info__description_group" th:utext="${theme.config.sidebar.profile.profileDesc}">
             </div>
diff --git a/templates/modules/widgets/aside/recent-posts.html b/templates/modules/widgets/aside/recent-posts.html
index 3ff1f5e9..722ab988 100644
--- a/templates/modules/widgets/aside/recent-posts.html
+++ b/templates/modules/widgets/aside/recent-posts.html
@@ -7,8 +7,10 @@
         <!-- 最新文章，用户可以自定义展示数量 -->
         <div class="aside-list-item" th:each="post : ${posts}">
             <a class="thumbnail" th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
-                <img loading="lazy" th:alt="${post.spec.title}"
-                     th:src="${#strings.isEmpty(post.spec.cover) ? postRandomImg+post.spec.title : post.spec.cover}">
+                <img 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}">
             </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/top-group.html b/templates/modules/widgets/top-group.html
index 242f4203..87a02daa 100644
--- a/templates/modules/widgets/top-group.html
+++ b/templates/modules/widgets/top-group.html
@@ -13,9 +13,11 @@
             <a th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
                 <span class="recent-post-top-text"
                       th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'">荐</span>
-                <img class="post_bg" loading="lazy"
+                <img class="post_bg"
                      th:alt="${post.spec.title}"
-                     th:src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
+                     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}'
                 />
             </a>
         </div>
@@ -36,9 +38,11 @@
                 <a th:href="@{${post.status.permalink}}" th:title="${post.spec.title}">
                     <span class="recent-post-top-text"
                           th:attr="onclick='pjax.loadUrl(\''+ @{${post.status.permalink}} +'\')'">荐</span>
-                    <img class="post_bg" loading="lazy"
+                    <img class="post_bg"
                          th:alt="${post.spec.title}"
-                         th:src='${#strings.isEmpty(post.spec.cover) ? postRandomImg+","+post.spec.title : post.spec.cover}'
+                         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}'
                     />
                 </a>
             </div>
diff --git a/templates/moments.html b/templates/moments.html
index 88c2a476..ca24df7f 100644
--- a/templates/moments.html
+++ b/templates/moments.html
@@ -32,7 +32,9 @@
                                     <div class="bber-container-img" th:if="${#strings.contains(content.medium,'PHOTO')}">
                                         <img th:each="momentItem : ${content.medium}"
                                              th:if="${momentItem.type.name == 'PHOTO'}"
-                                             th:src="${momentItem.url}" title="瞬间配图">
+                                             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                             th:data-lazy-src="${momentItem.url}" 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 46a71695..894eab10 100644
--- a/templates/photos.html
+++ b/templates/photos.html
@@ -30,8 +30,11 @@
                                     <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:src="${photo.spec.url}" th:alt="${photo.spec.description}"
-                                             th:title="${photo.spec.description}">
+                                        <img th:title="${photo.spec.description}"
+                                             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                             th:data-lazy-src="${photo.spec.url}"
+                                             th:alt="${photo.spec.description}">
 
                                     </div>
                                 </div>
@@ -53,7 +56,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:src="${photo.spec.url}" th:alt="${photo.spec.description}"
+                                        <img th:data-lazy-src="${photo.spec.url}"
+                                             src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                             th:attr="onerror='this.onerror=null;this.src=\''+${errorImg}+'\''"
+                                             th:alt="${photo.spec.description}"
                                              th:title="${photo.spec.description}">
 
                                     </div>
diff --git a/templates/post.html b/templates/post.html
index affe71d6..c7aa88d1 100644
--- a/templates/post.html
+++ b/templates/post.html
@@ -124,7 +124,9 @@
                     <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"
-                                 th:src="${#strings.isEmpty(postCursor.previous.spec.cover) ? theme.config.layout.postRandomImg : postCursor.previous.spec.cover}">
+                                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                 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}">
                             <div class="pagination-info">
                                 <div class="label">上一篇</div>
                                 <div class="prev_info" th:text="${postCursor.previous.spec.title}"></div>
@@ -134,7 +136,9 @@
                     <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"
-                                 th:src="${#strings.isEmpty(postCursor.next.spec.cover) ? theme.config.layout.postRandomImg : postCursor.next.spec.cover}">
+                                 src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
+                                 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}">
                             <div class="pagination-info">
                                 <div class="label">下一篇</div>
                                 <div class="next_info" th:text="${postCursor.next.spec.title}"></div>