性能改进

zhheo · Jan 9, 2025 · d33e7e7 · d33e7e7
1 parent 9f203de
commit d33e7e7
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 5 deletions.
diff --git a/assets/js/main.js b/assets/js/main.js
@@ -4,6 +4,17 @@
 	Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
 */
 
+jQuery.event.special.touchstart = {
+	setup: function( _, ns, handle ) {
+		this.addEventListener("touchstart", handle, { passive: true });
+	}
+};
+jQuery.event.special.touchmove = {
+	setup: function( _, ns, handle ) {
+		this.addEventListener("touchmove", handle, { passive: true });
+	}
+};
+
 (function($) {
 
 	var	$window = $(window),
@@ -320,4 +331,92 @@ var a = 0;
 $('#fullscreen').on('click', function() {
     a++;
     a % 2 == 1 ? enterfullscreen() : exitfullscreen();
-})
+})
+
+$(function() {
+	var loading = false;
+	var $loadMore = $('#load-more');
+	var currentPage = 1;
+	var $main = $('#main');
+	var totalPages = parseInt($loadMore.data('total-pages')); // 获取总页数
+
+	var scrollHandler = function() {
+		// 如果正在加载或者没有更多内容,则不执行
+		if(loading) return;
+
+		// 如果已经到达最后一页,则移除加载更多标记并返回
+		if(currentPage >= totalPages) {
+			$loadMore.remove();
+			return;
+		}
+
+		// 检查是否滚动到底部
+		if($(window).scrollTop() + $(window).height() > $loadMore.offset().top - 100) {
+			loading = true;
+			currentPage++;
+
+			// 发起 AJAX 请求加载下一页
+			$.ajax({
+				url: window.location.pathname,
+				type: 'GET',
+				data: {
+					page: currentPage
+				},
+				success: function(response) {
+					// 解析返回的 HTML
+					var $res = $(response);
+					var $newPosts = $res.find('.thumb.img-area');
+
+					// 如果没有新文章了,则移除加载更多标记
+					if($newPosts.length === 0) {
+						$loadMore.remove();
+						return;
+					}
+
+					// 将新文章插入到容器中
+					$newPosts.insertBefore($loadMore);
+
+					// 重新初始化新加载文章的图片懒加载
+					checkImgs();
+
+					// 重新初始化 Poptrox
+					$main.poptrox({
+						baseZIndex: 20000,
+						caption: function($a) {
+							var s = '';
+							$a.nextAll().each(function() {
+								s += this.outerHTML;
+							});
+							return s;
+						},
+						fadeSpeed: 300,
+						onPopupClose: function() { $body.removeClass('modal-active'); },
+						onPopupOpen: function() { $body.addClass('modal-active'); },
+						overlayOpacity: 0,
+						popupCloserText: '',
+						popupHeight: 150,
+						popupLoaderText: '',
+						popupSpeed: 300,
+						popupWidth: 150,
+						selector: '.thumb > a.image',
+						usePopupCaption: true,
+						usePopupCloser: true,
+						usePopupDefaultStyling: false,
+						usePopupForceClose: true,
+						usePopupLoader: true,
+						usePopupNav: true,
+						windowMargin: 50
+					});
+
+					loading = false;
+				},
+				error: function() {
+					loading = false;
+				}
+			});
+		}
+	};
+
+	// 使用 passive 选项添加滚动事件监听器
+	window.addEventListener('scroll', scrollHandler, { passive: true });
+});
diff --git a/assets/js/util.js b/assets/js/util.js
@@ -586,4 +586,5 @@
 
 })(jQuery);
 
-document.write("<h1></h1>");
+// 使用DOM API添加元素
+document.body.appendChild(document.createElement('h1'));
diff --git a/assets/sass/main.scss b/assets/sass/main.scss
@@ -4,7 +4,6 @@
 @import 'libs/vendor';
 @import 'libs/breakpoints';
 @import 'fontawesome-all.min.css';
-@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,300italic,400,400italic');
 
 /*
 	Multiverse by HTML5 UP

diff --git a/index.php b/index.php
@@ -3,7 +3,7 @@
  * 一款简约的相册主题
  * @package 洪墨时光
  * @author zhheo
- * @version 2.12
+ * @version 2.13
  * @link https://zhheo.com/
  */
 ?>
@@ -102,6 +102,9 @@
           </li>
         </article>
       <?php endwhile; ?>
+
+      <!-- 添加一个加载更多的容器,并包含总页数信息 -->
+      <div id="load-more" data-page="1" data-total-pages="<?php echo ceil($this->getTotal() / $this->parameter->pageSize); ?>"></div>
     </div>
 
     <body>

diff --git a/releases.json b/releases.json
@@ -1,3 +1,3 @@
 {
-    "tag_name": "2.12"
+    "tag_name": "2.13"
 }
diff --git a/update.md b/update.md
@@ -4,6 +4,11 @@ rsync -avz --progress --chmod=755 ./ [email protected]:/www/wwwroot/plog.zhheo
 
 # 更新日志
 
+## 2.13
+性能提升：现在你无需设置每页展示999个文章了。现在只会按需加载
+移除了google字体请求
+大幅度优化了滚动性能
+
 ## 2.12
 添加主题中文名
 移除被issues误导而添加的换行判断