Widget:GF立绘切换：修订间差异

←上一编辑下一编辑→

可视化wikitext

@@ 第1行： / 第1行： @@
 <includeonly><script>
 (function() {
-     document.addEventListener('DOMContentLoaded', function() {
+     // 等待DOM和图片加载完成
-         // 获取所有信息框
+    function initSwitcher() {
-        var infoboxes = document.querySelectorAll('.gf-infobox-new');
+         document.querySelectorAll('.gf-infobox-new').forEach(function(box) {
+             if (box.dataset.initialized) return;
-        infoboxes.forEach(function(infobox) {
+             box.dataset.initialized = 'true';
-             var thumbItems = infobox.querySelectorAll('.gf-thumb-item');
-             var imageContainer = infobox.querySelector('.gf-image-container');
-            var currentImage = imageContainer ? imageContainer.querySelector('img') : null;
-             if (!thumbItems.length || !imageContainer) return;
+             var container = box.querySelector('.gf-image-container');
+            var thumbs = box.querySelectorAll('.gf-thumb-item');
-             // 为每个缩略图添加点击事件
+             if (!container || thumbs.length < 2) return;
-             thumbItems.forEach(function(thumb) {
-                 thumb.addEventListener('click', function() {
+             thumbs.forEach(function(thumb) {
-                     // 移除所有active状态
+                 thumb.addEventListener('click', function(e) {
-                    thumbItems.forEach(function(t) {
+                     e.preventDefault();
-                        t.classList.remove('active');
-                    });
-                     // 添加当前active状态
+                     // 更新激活状态
+                    thumbs.forEach(function(t) { t.classList.remove('active'); });
                      this.classList.add('active');
-                     // 获取图片地址
+                     // 获取新图片的文件名
-                     var imgSrc = this.getAttribute('data-img');
+                     var newFile = this.dataset.img;
+                    if (!newFile) return;
-                     // 创建新图片元素
+                    // 淡出旧图片
+                    var oldImg = container.querySelector('img');
+                    if (oldImg) {
+                        oldImg.style.opacity = '0';
+                        oldImg.style.transition = 'opacity 0.2s ease';
+                    }
+                     // 创建并加载新图片
                      var newImg = document.createElement('img');
-                     newImg.src = imgSrc;
+                     newImg.src = newFile; // MediaWiki会自动处理文件路径
-                    newImg.alt = '角色立绘';
                      newImg.style.maxWidth = '100%';
                      newImg.style.maxHeight = '400px';
                      newImg.style.objectFit = 'contain';
-                    // 淡入效果
                      newImg.style.opacity = '0';
                      newImg.style.transition = 'opacity 0.3s ease';
-                     // 替换图片
+                     newImg.onload = function() {
-                    imageContainer.innerHTML = '';
+                        // 替换内容
-                    imageContainer.appendChild(newImg);
+                        container.innerHTML = '';
+                        container.appendChild(newImg);
+                        // 触发淡入
+                        requestAnimationFrame(function() {
+                            newImg.style.opacity = '1';
+                        });
+                    };
-                     // 触发重排后执行淡入
+                     newImg.onerror = function() {
-                    setTimeout(function() {
+                        // 如果加载失败，恢复原状
-                        newImg.style.opacity = '1';
+                        if (oldImg) {
-                     }, 50);
+                            oldImg.style.opacity = '1';
+                        }
+                     };
                  });
              });
          });
-     });
+     }
+    if (document.readyState === 'loading') {
+        document.addEventListener('DOMContentLoaded', initSwitcher);
+    } else {
+        initSwitcher();
+    }
+    // 针对动态加载的内容再次尝试
+    if (window.mw && mw.hook) {
+        mw.hook('wikipage.content').add(initSwitcher);
+    }
 })();
 </script></includeonly>

2026年5月15日 (五) 11:01的版本