// main.js - 前端增强脚本 document.addEventListener("DOMContentLoaded", function () { // 图片懒加载(浏览器原生支持,这里作为后备) if ("loading" in HTMLImageElement.prototype) { const images = document.querySelectorAll('img[loading="lazy"]'); images.forEach((img) => { img.src = img.src; // 触发加载 }); } else { // 降级方案:使用 IntersectionObserver const lazyImages = document.querySelectorAll('img[loading="lazy"]'); if ("IntersectionObserver" in window) { const observer = new IntersectionObserver((entries) => { entries.forEach((entry) => { if (entry.isIntersecting) { const img = entry.target; img.src = img.dataset.src || img.src; observer.unobserve(img); } }); }); lazyImages.forEach((img) => observer.observe(img)); } } // 删除确认弹窗(已在模板中使用 confirm,这里作为补充) const deleteForms = document.querySelectorAll('form[action*="delete"]'); deleteForms.forEach((form) => { form.addEventListener("submit", function (e) { if (!confirm("确定要删除吗?此操作不可恢复。")) { e.preventDefault(); } }); }); // 固定“下一篇文章”按钮功能(仅首页存在) const nextBtn = document.getElementById('nextArticleBtn'); if (nextBtn) { nextBtn.addEventListener('click', function () { const cards = document.querySelectorAll('.card'); if (!cards.length) return; // 找到第一个顶部在视口下方(或刚好可见)的卡片 for (const card of cards) { const rect = card.getBoundingClientRect(); if (rect.top >= 1) { card.scrollIntoView({ behavior: 'smooth', block: 'start' }); return; } } // 没有在下方可见的卡片,滚动到最后一篇 cards[cards.length - 1].scrollIntoView({ behavior: 'smooth', block: 'start' }); }); } });