☰

SkeletonScript

Generate Skeleton

当前为 2024-09-23 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         SkeletonScript
  3. // @namespace    https://github.com/popring/vite-skeleton
  4. // @version      2024-09-23
  5. // @description  Generate Skeleton
  6. // @author       popring
  7. // @match        *://*/*
  8. // @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
  9. // @grant        none
  10. // @license      MIT
  11. // ==/UserScript==
  12.  
  13. // 递归生成骨架图
  14. function processElement(el, skeletonOverlay, bodyRect) {
  15.   const children = el.children;
  16.  
  17.   if (children.length > 0) {
  18.     for (let i = 0; i < children.length; i++) {
  19.       processElement(children[i], skeletonOverlay, bodyRect);
  20.     }
  21.   } else {
  22.     const rect = el.getBoundingClientRect();
  23.     if (rect.width > 0 && rect.height > 0) {
  24.       const skeletonElement = document.createElement('div');
  25.       skeletonElement.className = 'skeleton-box';
  26.       skeletonElement.style.position = 'absolute';
  27.       skeletonElement.style.top = rect.top - bodyRect.top + 'px';
  28.       skeletonElement.style.left = rect.left - bodyRect.left + 'px';
  29.       skeletonElement.style.width = rect.width + 'px';
  30.       skeletonElement.style.height = rect.height + 'px';
  31.       skeletonOverlay.appendChild(skeletonElement);
  32.     }
  33.   }
  34. }
  35.  
  36. // 覆盖页面并生成骨架图
  37. function generateSkeleton() {
  38.   if (document.getElementById('skeleton-overlay')) return;
  39.  
  40.   const skeletonOverlay = document.createElement('div');
  41.   skeletonOverlay.id = 'skeleton-overlay';
  42.   skeletonOverlay.style.position = 'fixed';
  43.   skeletonOverlay.style.top = 0;
  44.   skeletonOverlay.style.left = 0;
  45.   skeletonOverlay.style.width = '100%';
  46.   skeletonOverlay.style.height = '100%';
  47.   skeletonOverlay.style.zIndex = 9999;
  48.   skeletonOverlay.style.backgroundColor = 'rgba(255, 255, 255, 1)';
  49.  
  50.   const bodyRect = document.body.getBoundingClientRect();
  51.  
  52.   // 排除 <br> 标签
  53.   document
  54.     .querySelectorAll('div, p, h1, h2, h3, h4, h5, h6, a, img, span, em')
  55.     .forEach((el) => {
  56.       processElement(el, skeletonOverlay, bodyRect);
  57.     });
  58.  
  59.   insertSkeletonStyles(skeletonOverlay);
  60.   document.body.appendChild(skeletonOverlay);
  61. }
  62.  
  63. // 骨架图样式函数
  64. function insertSkeletonStyles(skeletonOverlay) {
  65.   const skeletonStyles = `
  66.     .skeleton-box {
  67.       background-color: #f0f0f0;
  68.       animation: skeleton-loading 1.5s infinite;
  69.       border-radius: 4px;
  70.     }
  71.     @keyframes skeleton-loading {
  72.       0% {
  73.         background-color: #f0f0f0;
  74.       }
  75.       50% {
  76.         background-color: #e0e0e0;
  77.       }
  78.       100% {
  79.         background-color: #f0f0f0;
  80.       }
  81.     }
  82.   `;
  83.  
  84.   const styleSheet = document.createElement('style');
  85.   styleSheet.type = 'text/css';
  86.   styleSheet.innerHTML = skeletonStyles;
  87.   skeletonOverlay.appendChild(styleSheet);
  88. }
  89.  
  90. // 切换骨架图的显示和隐藏
  91. function toggleSkeleton() {
  92.   const skeletonOverlay = document.getElementById('skeleton-overlay');
  93.   if (skeletonOverlay) {
  94.     skeletonOverlay.style.display =
  95.       skeletonOverlay.style.display === 'none' ? 'block' : 'none';
  96.   } else {
  97.     generateSkeleton();
  98.   }
  99. }
  100.  
  101. // 添加控制按钮
  102. function addToggleButton() {
  103.   const button = document.createElement('button');
  104.   button.innerText = '切换骨架图显示';
  105.   button.style.position = 'fixed';
  106.   button.style.top = '10px';
  107.   button.style.right = '10px';
  108.   button.style.zIndex = 10000;
  109.   button.onclick = toggleSkeleton;
  110.  
  111.   document.body.appendChild(button);
  112. }
  113.  
  114. // 初始化函数，添加按钮
  115. function init() {
  116.   addToggleButton();
  117. }
  118.  
  119. // 将核心函数绑定到 window 对象上
  120. window.generateSkeleton = generateSkeleton;
  121. window.toggleSkeleton = toggleSkeleton;
  122.  
  123. // 初始化
  124. init();