切换图片和标注时显示叠加图加载状态

Show loading beside the annotation preview until both current images finish loading. Hide stale annotations during loading and keep the latest selection when switching quickly. Publish source, built page, documentation, and checksums together.

README.md

@@ -25,7 +25,7 @@ pinned: false
 - `data/videos.json`：视频与标注来源，区分官方标注和预测。
 - `data/preview_sources.json`：素材仓库、固定版本与来源清单。
 
-查看器支持样例与标注切换、透明度、同步放大和手部区域定位。每张图保留出处，原作者图使用本地无损 WebP。
+查看器支持样例与标注切换、透明度、同步放大和手部区域定位。切换时叠加栏显示“加载中”，新图与标注加载完成后一起显示；快速连续切换以最后一次选择为准。每张图保留出处，原作者图使用本地无损 WebP。
 
 ## 页面结构
 

deployment_manifest.json

@@ -22,8 +22,8 @@
     },
     {
       "path": "README.md",
-      "bytes": 4038,
-      "sha256": "59cfbf449ae524744cc762d8311da421ffa287f78bc2c8396e272e8d270d8bc8"
+      "bytes": 4173,
+      "sha256": "f70d18ce15b54bf1370a7475196ead7f786bf850c524912da20ef0dd7d822a4b"
     },
     {
       "path": "data/datasets.json",
@@ -62,8 +62,8 @@
     },
     {
       "path": "index.html",
-      "bytes": 49125,
-      "sha256": "cb82e81762aabba470cba008b40d1f7ae6a5c738b844e89f232e16fa9bdd21df"
+      "bytes": 50508,
+      "sha256": "4ad135b296611f952e1972dfd1dfa26419fdb9a8aea71e6d9da9ccedc30e4bb4"
     },
     {
       "path": "media/.gitkeep",
@@ -1402,8 +1402,8 @@
     },
     {
       "path": "src/page.html",
-      "bytes": 48776,
-      "sha256": "24aba32afa4b8407b0066bf92c1bab9df6f76fb2998b02ad94aa6c92d428f7e6"
+      "bytes": 50159,
+      "sha256": "6e06556d6df3aaa014035458c5cca596537c4768d748b28db5a09cdcb4f86505"
     },
     {
       "path": "tools/add_preview.py",

index.html

@@ -246,7 +246,8 @@ footer { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--lin
 .preview-tools button { padding:6px 10px; border:1px solid var(--line); color:var(--ink); background:var(--surface); border-radius:4px; cursor:pointer; font:inherit; }
 .preview-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
 .preview-pair figure { margin:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--surface); }
-.preview-pair figcaption { padding:8px 10px; font-size:.8rem; min-height:2.8em; }
+.preview-pair figcaption { padding:8px 10px; font-size:.8rem; min-height:2.8em; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; justify-content:space-between; }
+.loading-status { color:var(--accent); white-space:nowrap; }
 .preview-pair svg { display:block; width:100%; height:min(46vw,480px); background:#10161c; }
 .preview-thumbs { display:flex; gap:8px; overflow-x:auto; padding:3px 0 7px; }
 .preview-thumbs button { flex:0 0 86px; position:relative; padding:0; border:2px solid transparent; border-radius:4px; cursor:pointer; overflow:hidden; background:var(--sunk); }
@@ -331,13 +332,13 @@ footer { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--lin
   function previewHTML(d) {
     var pv = PREV[d.id];
     return '<div class="preview"><div class="preview-tools"><button id="pv-prev" aria-label="上一个样例">←</button><label>样例<select id="pv-select" aria-label="样例">' + pv.map(function (p, i) { return '<option value="' + i + '">' + (i + 1) + ' · ' + esc(p.caption) + '</option>'; }).join('') + '</select></label><button id="pv-next" aria-label="下一个样例">→</button><label>标注<select id="pv-mode" aria-label="标注"></select></label></div>' +
-      '<div class="preview-pair"><figure><figcaption id="pv-rgb-label"></figcaption><svg id="pv-left" role="img" aria-label="原始图像" preserveAspectRatio="xMidYMid meet"><image id="pv-rgb"/></svg></figure><figure><figcaption id="pv-gt-label"></figcaption><svg id="pv-right" role="img" aria-label="同帧图像与来源标注叠加" preserveAspectRatio="xMidYMid meet"><image id="pv-base"/><image id="pv-overlay"/></svg></figure></div>' +
+      '<div class="preview-pair"><figure><figcaption id="pv-rgb-label"></figcaption><svg id="pv-left" role="img" aria-label="原始图像" preserveAspectRatio="xMidYMid meet"><image id="pv-rgb"/></svg></figure><figure><figcaption><span id="pv-gt-label"></span><span id="pv-loading" class="loading-status" role="status" aria-live="polite">加载中…</span></figcaption><svg id="pv-right" role="img" aria-label="同帧图像与来源标注叠加" preserveAspectRatio="xMidYMid meet"><image id="pv-base"/><image id="pv-overlay"/></svg></figure></div>' +
       '<div class="preview-tools"><label>叠加透明度<input id="pv-alpha" aria-label="叠加透明度" type="range" min="0" max="100" value="100"><output id="pv-alpha-value">100%</output></label><label>同步放大<input id="pv-zoom" aria-label="同步放大" type="range" min="1" max="8" step="0.1" value="1"><output id="pv-zoom-value">1×</output></label><button id="pv-hand">手部区域</button><button id="pv-reset">全图</button></div>' +
       '<p id="pv-caption" class="small"></p><div id="pv-strata" class="chips"></div><div id="pv-source" class="source-note"></div><div class="preview-thumbs">' + pv.map(function (p, i) { return '<button data-preview="' + i + '" aria-label="样例 ' + (i + 1) + '"><img loading="lazy" src="' + esc(p.rgb) + '" alt=""><span>' + (i + 1) + '</span></button>'; }).join('') + '</div></div>' + samplingHTML(d.id);
   }
 
   function bindPreview(id) {
-    var pv = PREV[id], index = 0, box;
+    var pv = PREV[id], index = 0, box, loadVersion = 0;
     function el(name) { return document.getElementById('pv-' + name); }
     function viewport() {
       var zoom = Number(el('zoom').value), w = box[2] / zoom, h = box[3] / zoom;
@@ -346,14 +347,32 @@ footer { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--lin
       el('zoom-value').textContent = zoom.toFixed(1).replace('.0', '') + '×';
     }
     function annotation() {
-      var mode = pv[index].modes[Number(el('mode').value)];
-      el('overlay').setAttribute('href', mode.src); el('gt-label').textContent = '标注叠加 · ' + mode.label;
+      var p = pv[index], mode = p.modes[Number(el('mode').value)], version = ++loadVersion;
+      var pane = el('right'), status = el('loading'), images = [];
+      el('gt-label').textContent = '标注叠加 · ' + mode.label;
+      status.hidden = false; status.textContent = '加载中…'; pane.setAttribute('aria-busy', 'true');
+      Promise.all([['base', p.rgb], ['overlay', mode.src]].map(function (item) {
+        var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        image.id = 'pv-' + item[0]; image.setAttribute('width', p.width); image.setAttribute('height', p.height);
+        image.style.visibility = 'hidden';
+        if (item[0] === 'overlay') image.style.opacity = Number(el('alpha').value) / 100;
+        var ready = new Promise(function (resolve, reject) { image.onload = resolve; image.onerror = reject; });
+        el(item[0]).replaceWith(image); images.push(image); image.setAttribute('href', item[1]);
+        return ready;
+      })).then(function () {
+        if (version !== loadVersion) return;
+        images.forEach(function (image) { image.style.visibility = 'visible'; });
+        status.hidden = true; pane.setAttribute('aria-busy', 'false');
+      }, function () {
+        if (version !== loadVersion) return;
+        status.textContent = '加载失败'; pane.setAttribute('aria-busy', 'false');
+      });
     }
     function show() {
       var p = pv[index];
       el('select').value = index;
-      ['rgb', 'base', 'overlay'].forEach(function (name) { el(name).setAttribute('width', p.width); el(name).setAttribute('height', p.height); });
-      el('rgb').setAttribute('href', p.rgb); el('base').setAttribute('href', p.rgb);
+      el('rgb').setAttribute('width', p.width); el('rgb').setAttribute('height', p.height);
+      el('rgb').setAttribute('href', p.rgb);
       el('rgb-label').textContent = p.rgb_label;
       el('mode').innerHTML = p.modes.map(function (m, i) { return '<option value="' + i + '">' + esc(m.label) + '</option>'; }).join('');
       annotation(); box = [0, 0, p.width, p.height]; el('zoom').value = 1; viewport();

src/page.html

@@ -240,7 +240,8 @@ footer { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--lin
 .preview-tools button { padding:6px 10px; border:1px solid var(--line); color:var(--ink); background:var(--surface); border-radius:4px; cursor:pointer; font:inherit; }
 .preview-pair { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:10px; }
 .preview-pair figure { margin:0; border:1px solid var(--line); border-radius:6px; overflow:hidden; background:var(--surface); }
-.preview-pair figcaption { padding:8px 10px; font-size:.8rem; min-height:2.8em; }
+.preview-pair figcaption { padding:8px 10px; font-size:.8rem; min-height:2.8em; display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; justify-content:space-between; }
+.loading-status { color:var(--accent); white-space:nowrap; }
 .preview-pair svg { display:block; width:100%; height:min(46vw,480px); background:#10161c; }
 .preview-thumbs { display:flex; gap:8px; overflow-x:auto; padding:3px 0 7px; }
 .preview-thumbs button { flex:0 0 86px; position:relative; padding:0; border:2px solid transparent; border-radius:4px; cursor:pointer; overflow:hidden; background:var(--sunk); }
@@ -322,13 +323,13 @@ footer { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--lin
   function previewHTML(d) {
     var pv = PREV[d.id];
     return '<div class="preview"><div class="preview-tools"><button id="pv-prev" aria-label="上一个样例">←</button><label>样例<select id="pv-select" aria-label="样例">' + pv.map(function (p, i) { return '<option value="' + i + '">' + (i + 1) + ' · ' + esc(p.caption) + '</option>'; }).join('') + '</select></label><button id="pv-next" aria-label="下一个样例">→</button><label>标注<select id="pv-mode" aria-label="标注"></select></label></div>' +
-      '<div class="preview-pair"><figure><figcaption id="pv-rgb-label"></figcaption><svg id="pv-left" role="img" aria-label="原始图像" preserveAspectRatio="xMidYMid meet"><image id="pv-rgb"/></svg></figure><figure><figcaption id="pv-gt-label"></figcaption><svg id="pv-right" role="img" aria-label="同帧图像与来源标注叠加" preserveAspectRatio="xMidYMid meet"><image id="pv-base"/><image id="pv-overlay"/></svg></figure></div>' +
+      '<div class="preview-pair"><figure><figcaption id="pv-rgb-label"></figcaption><svg id="pv-left" role="img" aria-label="原始图像" preserveAspectRatio="xMidYMid meet"><image id="pv-rgb"/></svg></figure><figure><figcaption><span id="pv-gt-label"></span><span id="pv-loading" class="loading-status" role="status" aria-live="polite">加载中…</span></figcaption><svg id="pv-right" role="img" aria-label="同帧图像与来源标注叠加" preserveAspectRatio="xMidYMid meet"><image id="pv-base"/><image id="pv-overlay"/></svg></figure></div>' +
       '<div class="preview-tools"><label>叠加透明度<input id="pv-alpha" aria-label="叠加透明度" type="range" min="0" max="100" value="100"><output id="pv-alpha-value">100%</output></label><label>同步放大<input id="pv-zoom" aria-label="同步放大" type="range" min="1" max="8" step="0.1" value="1"><output id="pv-zoom-value">1×</output></label><button id="pv-hand">手部区域</button><button id="pv-reset">全图</button></div>' +
       '<p id="pv-caption" class="small"></p><div id="pv-strata" class="chips"></div><div id="pv-source" class="source-note"></div><div class="preview-thumbs">' + pv.map(function (p, i) { return '<button data-preview="' + i + '" aria-label="样例 ' + (i + 1) + '"><img loading="lazy" src="' + esc(p.rgb) + '" alt=""><span>' + (i + 1) + '</span></button>'; }).join('') + '</div></div>' + samplingHTML(d.id);
   }
 
   function bindPreview(id) {
-    var pv = PREV[id], index = 0, box;
+    var pv = PREV[id], index = 0, box, loadVersion = 0;
     function el(name) { return document.getElementById('pv-' + name); }
     function viewport() {
       var zoom = Number(el('zoom').value), w = box[2] / zoom, h = box[3] / zoom;
@@ -337,14 +338,32 @@ footer { font-size: 0.8rem; color: var(--muted); border-top: 1px solid var(--lin
       el('zoom-value').textContent = zoom.toFixed(1).replace('.0', '') + '×';
     }
     function annotation() {
-      var mode = pv[index].modes[Number(el('mode').value)];
-      el('overlay').setAttribute('href', mode.src); el('gt-label').textContent = '标注叠加 · ' + mode.label;
+      var p = pv[index], mode = p.modes[Number(el('mode').value)], version = ++loadVersion;
+      var pane = el('right'), status = el('loading'), images = [];
+      el('gt-label').textContent = '标注叠加 · ' + mode.label;
+      status.hidden = false; status.textContent = '加载中…'; pane.setAttribute('aria-busy', 'true');
+      Promise.all([['base', p.rgb], ['overlay', mode.src]].map(function (item) {
+        var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
+        image.id = 'pv-' + item[0]; image.setAttribute('width', p.width); image.setAttribute('height', p.height);
+        image.style.visibility = 'hidden';
+        if (item[0] === 'overlay') image.style.opacity = Number(el('alpha').value) / 100;
+        var ready = new Promise(function (resolve, reject) { image.onload = resolve; image.onerror = reject; });
+        el(item[0]).replaceWith(image); images.push(image); image.setAttribute('href', item[1]);
+        return ready;
+      })).then(function () {
+        if (version !== loadVersion) return;
+        images.forEach(function (image) { image.style.visibility = 'visible'; });
+        status.hidden = true; pane.setAttribute('aria-busy', 'false');
+      }, function () {
+        if (version !== loadVersion) return;
+        status.textContent = '加载失败'; pane.setAttribute('aria-busy', 'false');
+      });
     }
     function show() {
       var p = pv[index];
       el('select').value = index;
-      ['rgb', 'base', 'overlay'].forEach(function (name) { el(name).setAttribute('width', p.width); el(name).setAttribute('height', p.height); });
-      el('rgb').setAttribute('href', p.rgb); el('base').setAttribute('href', p.rgb);
+      el('rgb').setAttribute('width', p.width); el('rgb').setAttribute('height', p.height);
+      el('rgb').setAttribute('href', p.rgb);
       el('rgb-label').textContent = p.rgb_label;
       el('mode').innerHTML = p.modes.map(function (m, i) { return '<option value="' + i + '">' + esc(m.label) + '</option>'; }).join('');
       annotation(); box = [0, 0, p.width, p.height]; el('zoom').value = 1; viewport();