【脚本求助】如何取消修改网页元素的脚本在加载时导致的页面突变？

动机
昨天搓了这么一个油猴脚本：【油猴脚本】自定义左侧边栏，其功能是修改论坛左侧边栏成想要的样子。
实际使用过程中，还是遇到了一点点问题，即在页面完全加载之前，左侧边栏依然维持原来的样子，加载完成后脚本才会生效——这会导致边栏突变，或者说“闪动”。在打开主页和我的勋章时尤为明显，强迫症震怒。

需求
我尝试过使用@Run document-start来调整脚本的运行时点，但这有可能导致脚本加载不稳定，一旦错过了对应时点，脚本就不加载了。而相比不稳定我宁可它闪动（悲）
总之，希望各位大佬能通过修改这个脚本、或任意能实现相同功能的方法，把这个“闪动”撒掉。提前感谢惹(´▽`ʃ♡ƪ)~

修改运行时间是唯一正确的做法
因为这个闪动是因为，脚本的默认执行时间是在页面完全加载完之后，再进行的修改
你想不要这个闪动，只能比页面完全加载更早

还有一个方案你可以自己尝试一下
原来的列表，用adblock之类的东西给他干掉
自己用油猴脚本写一个新的
adblock也是在页面加载之前就阻止了，比油猴的docment-start还要快一点

不过可能也会闪，不过闪一般是有变化的话，肉眼感觉比较明显
如果是空白的页面，也许肉眼就感觉不到了
你可以尝试一下

试着修改了一下，效果不大行

说下我的思路：

给过渡加特效
or
一开始把Menu全部隐藏再显示
   

document.addEventListener('DOMContentLoaded', () => {
    const navMenu = document.querySelector('.nav-menu');
    if (navMenu) {
        navMenu.style.display = 'none';


（Run document-start，闪动感觉少了，不过有时候会一直不显示（或许得加个检测？
↓
分成两个脚本，一个隐藏，一个显示状态栏好一点？（还能搞花样

我的gpt告诉我可以使用css先隐藏原先的菜单，目前看起来还可以
@Name @match

1. // ==UserScript==
   
2. // @name         Custom Nav Menu for Gamemale
   
3. // @namespace    http://tampermonkey.net/
   
4. // @version      0.1
   
5. // @description  删除原有导航菜单并添加自定义菜单，在页面加载前隐藏旧菜单避免抖动
   
6. // [url=home.php?mod=space&uid=700810]@Match[/url]        https://www.gamemale.com/*
   
7. // @grant        none
   
8. // @run-at       document-start
   
9. // ==/UserScript==
   
10. 
    
11. (function() {
    
12.     'use strict';
    
13. 
    
14.     // 注入CSS隐藏原菜单，避免加载时短暂显示
    
15.     const style = document.createElement('style');
    
16.     style.innerHTML = `.nav.nav-menu { display: none !important; }`;
    
17.     document.head.appendChild(style);
    
18. 
    
19.     // 删除原菜单并插入自定义菜单
    
20.     window.addEventListener('DOMContentLoaded', () => {
    
21.         // 删除旧菜单
    
22.         const navMenu = document.querySelector('.nav.nav-menu');
    
23.         if (navMenu) {
    
24.             navMenu.remove();
    
25.         }
    
26. 
    
27.         // 创建新的导航菜单
    
28.         const newNavMenu = document.createElement('ul');
    
29.         newNavMenu.className = 'nav nav-menu';
    
30. 
    
31.         // 自定义菜单项列表
    
32.         const menuItems = [
    
33.             { href: 'https://www.gamemale.com/forum.php', text: '首 页', title: 'BBS' },
    
34.             { href: 'https://www.gamemale.com/forum.php?mod=forumdisplay&fid=150&filter=author&orderby=dateline', text: '和谐动漫 ❤', title: '发帖时间倒序的和谐动漫。'},
    
35.             { href: 'https://www.gamemale.com/thread-9039-1-1.html', text: '论坛规范 ★', title: '全面禁水！进站必读！' },
    
36.             { href: 'https://www.gamemale.com/home.php?mod=task&do=view&id=14', text: '新人升级 ✌', title: '证明你不是机器人！' },
    
37.             { href: 'https://www.gamemale.com/thread-70042-1-1.html', text: '常见问题 ？', title: '' },
    
38.             { href: 'wodexunzhang-showxunzhang.html', text: '勋章商城 ▢', title: 'Lv.≥2 来开启勋章大世界！' },
    
39.             { href: 'https://www.gamemale.com/wodexunzhang-showxunzhang.html?action=my', text: '我的勋章 ▣', title: '' },
    
40.             { href: 'https://www.gamemale.com/home.php?mod=magic', text: '道具商店 ✿', title: '用于帖子和日志的神奇东西！' },
    
41.             { href: 'https://www.gamemale.com/home.php?mod=spacecp&ac=credit&op=exchange', text: '血液祭献 ⇄', title: '献出血液换得其他属性积分！' },
    
42.             { href: 'plugin.php?id=viewui_draw', text: '你画我猜 ✎', title: '你画我猜奖励多多！' },
    
43.             { href: 'tshuz_buyname-tshuz_buyname.html', text: '头衔称号 ≛', title: '不可思议的新身份！' },
    
44.             { href: 'https://www.gamemale.com/home.php?mod=task', text: '热门任务 ☑', title: '' },
    
45.             { href: 'https://www.gamemale.com/forum-165-1.html', text: '近期活动 ✦', title: '' },
    
46.             { href: 'https://www.gamemale.com/forum.php?mod=collection&op=all&order=threadnum', text: '专帖合辑 ▤', title: '一网打尽已整合好帖！' },
    
47.             { href: 'nds_up_ques-nds_up_ques.html', text: '科考小队▕▀', title: '' }
    
48.         ];
    
49. 
    
50.         // 动态创建每一个菜单项
    
51.         menuItems.forEach(item => {
    
52.             const listItem = document.createElement('li');
    
53.             if (item.text == '首 页') {
    
54.                 listItem.className = 'hover';
    
55.             }
    
56.             const link = document.createElement('a');
    
57.             link.href = item.href;
    
58.             link.textContent = item.text;
    
59.             link.title = item.title;
    
60.             listItem.appendChild(link);
    
61.             newNavMenu.appendChild(listItem);
    
62.         });
    
63. 
    
64.         // 插入新的菜单
    
65.         const header = document.getElementById('hd');
    
66.         if (header) {
    
67.             header.appendChild(newNavMenu);
    
68.         }
    
69. 
    
70.         // 移除隐藏样式，显示新菜单
    
71.         style.remove();
    
72.     });
    
73. })();

复制代码

@Name @match

1. // ==UserScript==
   
2. // <span id="kM0.8494679891935208">[url=home.php?mod=space&uid=668096]@Name[/url]  </span>全局：左侧菜单自定义
   
3. // @namespace    http://tampermonkey.net/
   
4. // @version      1.0
   
5. // @description  修改导航菜单按钮的显示内容、悬浮提示和链接
   
6. // @author       Étoiles
   
7. // @match        https://www.gamemale.com/*
   
8. // @grant        GM_addStyle
   
9. // @run-at       document-start
   
10. // ==/UserScript==
    
11. 
    
12. (function () {
    
13.   'use strict';
    
14. 
    
15.   // ******通过调整代码运行时间开局添加样式隐藏菜单栏
    
16.   GM_addStyle(`.nav.nav-menu{display:none;}`)
    
17. 
    
18. 
    
19.   // 定义每个按钮的配置，默认保持不变
    
20.   // 1 表示按钮不变
    
21.   // 0 表示禁止按钮显示
    
22.   // 2 表示修改按钮 请按照[2,"按钮名称","鼠标悬停时的按钮描述","按钮关联到的网址"]格式进行填写
    
23.   const buttonConfig = {
    
24.       "mn_forum": [1],
    
25.       // 首 页
    
26. 
    
27.       "mn_N2c45": [2,"和谐动漫 ❤","发帖时间倒序的和谐动漫。","https://www.gamemale.com/forum.php?mod=forumdisplay&fid=150&filter=author&orderby=dateline"],
    
28.       // 论坛规范
    
29. 
    
30.       "mn_Na183": [2,"ＣＯＤＥ ⌘","看看ＣＯＤＥ版块有啥新鲜事。","https://www.gamemale.com/forum.php?mod=forumdisplay&fid=206&filter=author&orderby=dateline"],
    
31.       // 新人升级
    
32. 
    
33.       "mn_N69dc": [2,"二手市场 ▧","二手市场一键直达！","https://www.gamemale.com/wodexunzhang-showxunzhang.html?action=showjishou"],
    
34.       // 常见问题
    
35. 
    
36.       "mn_Nf376": [2,"勋章商城 ▤"],
    
37.       // 勋章商城
    
38. 
    
39.       "mn_N13d5": [1],
    
40.       // 我的勋章
    
41. 
    
42.       "mn_Nc5cc": [1],
    
43.       // 道具商店
    
44. 
    
45.       "mn_N35bc": [1],
    
46.       // 血液祭献
    
47. 
    
48.       "mn_N34e7": [2,"记录广场 ◉","快速查看当前热点~","https://www.gamemale.com/home.php?mod=space&do=doing&view=all"],
    
49.       // 你画我猜
    
50. 
    
51.       "mn_N50a7": [2,"头衔称号 ♞"],
    
52.       // 头衔称号
    
53. 
    
54.       "mn_Ncfa1": [2,"热门任务 ✈"],
    
55.       // 热门任务
    
56. 
    
57.       "mn_N2e25": [2,"我的访客 ☎","看看有谁来过我的空间。","https://www.gamemale.com/home.php?mod=space&do=friend&view=visitor"],
    
58.       // 近期活动
    
59. 
    
60.       "mn_N4483": [2,"本月调查 ♬","快速查看所有投票帖。","https://www.gamemale.com/forum.php?mod=collection&action=view&ctid=352&fromop=all"],
    
61.       // 专帖合辑
    
62. 
    
63.       "mn_Ncc15": [0]
    
64.       // 科考小队
    
65.   };
    
66. 
    
67.   // 创建MutationObserver实例
    
68.   const observer = new MutationObserver((mutations) => {
    
69.       mutations.forEach((mutation) => {
    
70.           if (mutation.type === 'childList') {
    
71.               // 获取所有的按钮列表
    
72.               const navMenu = document.querySelectorAll('.nav-menu li');
    
73. 
    
74.               navMenu.forEach((button) => {
    
75.                   const buttonId = button.id;
    
76.                   if (buttonConfig.hasOwnProperty(buttonId)) {
    
77.                       const config = buttonConfig[buttonId];
    
78.                       const displayMode = config[0];
    
79. 
    
80.                       if (displayMode === 0) {
    
81.                           // 设置为0则隐藏按钮
    
82.                           button.style.display = 'none';
    
83.                       } else if (displayMode === 2) {
    
84.                           // 设置为2则修改按钮
    
85.                           const linkElement = button.querySelector('a');
    
86.                           if (linkElement) {
    
87.                               // 设置按钮显示内容
    
88.                               if (config[1]) linkElement.textContent = config[1];
    
89.                               // 设置悬浮提示内容
    
90.                               if (config[2]) linkElement.title = config[2];
    
91.                               // 设置链接
    
92.                               if (config[3]) linkElement.href = config[3];
    
93.                           }
    
94.                       }
    
95.                   }
    
96.               });
    
97. 
    
98.               // *****在修改完代码后重新显示菜单栏
    
99.               document.querySelector('.nav.nav-menu').style.display = 'block'
    
100.           }
     
101.       });
     
102.   });
     
103. 
     
104.   // 开始观察目标节点
     
105.   observer.observe(document.body, { childList: true, subtree: true });
     
106. })();

复制代码