EX煎蛋

煎蛋直接显示原图，GIF自动加载，吐槽自动加载，页面重新排版，左侧图片右侧吐槽，适配新版PC端
当前为 2025-04-19 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name         EX煎蛋
// @namespace    https://gf.qytechs.cn/zh-CN/scripts/34894
// @version      1.3
// @description  煎蛋直接显示原图，GIF自动加载，吐槽自动加载，页面重新排版，左侧图片右侧吐槽，适配新版PC端
// @author       dazzulay
// @license       MIT
// @match        *://*.jandan.net/*
// @run-at        document-body
// @grant       GM_addStyle
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    GM_addStyle(`
.wrapper{
    max-width: 100%;
}
.container{
    max-width: 100%;
}

.container main{
    width: auto;
    flex: 1;
}

.container aside{
    width: 20%;
    min-width: 200px;
}

.comment-row.p-2 {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.comment-row.p-2 > .comment-meta {
    width: 50%;
    order: 1;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.comment-row.p-2 > .comment-content {
    width: 50%;
    order: 3;
    position: sticky;
    top: 35px;
}

.comment-row.p-2 > .comment-func {
    width: 50%;
    order: 2;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1;
}

.tucao-container {
    width: 50%;
    order: 4;
    position: sticky;
    top: 35px;
    max-height: calc(100vh - 35px);
    overflow-y: auto;
}
    `)

    // 目标css
    let targetClass = '.comment-row';
    let imgContainerClass = '.img-container';
    let commentFuncClass = '.comment-func';

    // 先运行一次，防止后台打开标签页
    let targets = document.querySelectorAll(targetClass);
    targets.forEach(handleTargetElement);

    // 处理targetClass
    function handleTargetElement(tagert) {
        loadImg(tagert)
        loadTucao(tagert)
    }

    // 替换图片
    function changeImg(element){
        let exjdimg = element.querySelector('.exjdimg');
        if(exjdimg){
            let imglink = element.querySelector('.img-link').getAttribute('href');
            exjdimg.setAttribute('src', imglink);

            let img = exjdimg.nextElementSibling;
            if (img) {
                img.style.display = 'none';
            }

            let gifOverlay = element.querySelector('.gif-overlay');
            if (gifOverlay)  gifOverlay.remove();
        }
    }

    // 监听滚动加载图片
    function loadImg(target){
        let imgContainers = target.querySelectorAll(imgContainerClass)
        imgContainers.forEach((element) => {
            // 要执行的方法
            function handleCommentFuncAppear(element) {
                //console.log('元素出现在视口中:', element);
                // 在这里添加你的逻辑
                let newImg = document.createElement('img');
                newImg.className = 'exjdimg';
                element.querySelector('.img-link').after(newImg);
            }

            // 设置Intersection Observer
            const ob = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        handleCommentFuncAppear(entry.target);
                        // 如果需要只执行一次，可以取消观察
                        ob.unobserve(entry.target);
                        ob.disconnect();
                    }
                });
            }, {
                threshold: 0
            });

            ob.observe(element);
        })
    }

    // 监听滚动加载吐槽
    function loadTucao(target){
        let element = target.querySelector(commentFuncClass);

        // 要执行的方法
        function handleCommentFuncAppear(element) {
            //console.log('元素出现在视口中:', element);
            // 在这里添加你的逻辑
            const targetSpan = element.querySelector('span:nth-child(3)');
            if (targetSpan) {
                //console.log('找到目标 span，模拟点击:', targetSpan);
                targetSpan.click(); // 触发点击事件
            } else {
                //console.warn('未找到 span:nth-child(3)', element);
            }
        }

        // 设置Intersection Observer
        const ob = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    handleCommentFuncAppear(entry.target);
                    // 如果需要只执行一次，可以取消观察
                    ob.unobserve(entry.target);
                    ob.disconnect();
                }
            });
        }, {
            threshold: 0
        });

        ob.observe(element);
    }

    // 观察变动的节点
    function obbody(){
        // 选择需要观察变动的节点
        const targetNode = document.body;

        // 观察器的配置（需要观察什么变动）
        const config = {
            childList: true, // 观察该元素的子元素新增或者删除
            subtree: true, //该元素的所有子元素新增或者删除
            attributes: true,
        };

        // 当观察到变动时执行的回调函数
        const callback = function(mutationsList, observer) {
            mutationsList.forEach((mutation) => {
                // console.log(mutation)

                // 检查所有新增的节点
                mutation.addedNodes.forEach((node) => {
                    // 如果是元素节点（而不是文本节点等）
                    if (node.nodeType === Node.ELEMENT_NODE) {
                        // 检查当前节点是否匹配目标选择器
                        if (node.matches(targetClass)) {
                            handleTargetElement(node);
                        }
                        // 检查当前节点的所有子元素（包括深层嵌套）
                        const nestedTargets = node.querySelectorAll(targetClass);
                        nestedTargets.forEach(handleTargetElement);
                    }
                });

                // 处理img
                if (mutation.target.matches(imgContainerClass)){
                    let element = mutation.target;
                    if(mutation.addedNodes.length > 0){
                        changeImg(element)
                    }
                }

            });
        };

        // 创建一个观察器实例并传入回调函数
        const ob = new MutationObserver(callback);
        // 开始观察目标节点
        ob.observe(targetNode, config);
    }
    obbody()

})();
欢迎访问Greasy Fork镜像
