rypblog/static/js/main.js

// 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' });
        });
    }
});