rypblog/static/js/main.js

// main.js - 前端增强脚本

document.addEventListener("DOMContentLoaded", function () {
    // 卡片悬停效果（桌面端）
    const cards = document.querySelectorAll(".card");
    cards.forEach((card) => {
        card.addEventListener("mouseenter", function () {
            this.style.transform = "translateY(-4px)";
        });
        card.addEventListener("mouseleave", function () {
            this.style.transform = "translateY(0)";
        });
    });

    // 图片懒加载（浏览器原生支持，这里作为后备）
    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();
            }
        });
    });
});