refactor(diff): drive diff DOM init from the global selector observer (#38740)

Co-authored-by: wxiaoguang <wxiaoguang@gmail.com>

web_src/js/features/imagediff.ts

@@ -1,5 +1,5 @@
 import {GET} from '../modules/fetch.ts';
-import {hideElem, loadElem, queryElemChildren, queryElems} from '../utils/dom.ts';
+import {hideElem, loadElem, queryElemChildren} from '../utils/dom.ts';
 import {parseDom} from '../utils.ts';
 
 type ImageContext = {
@@ -98,7 +98,6 @@ class ImageDiff {
 
   async init(containerEl: HTMLElement) {
     this.containerEl = containerEl;
-    containerEl.setAttribute('data-image-diff-loaded', 'true');
 
     // the container may be hidden by "viewed" checkbox, so use the parent's width for reference
     this.diffContainerWidth = Math.max(containerEl.closest('.diff-file-box')!.clientWidth - 300, 100);
@@ -300,8 +299,6 @@ class ImageDiff {
   }
 }
 
-export function initImageDiff() {
-  for (const el of queryElems<HTMLImageElement>(document, '.image-diff:not([data-image-diff-loaded])')) {
-    (new ImageDiff()).init(el); // it is async, but we don't need to await for it
-  }
+export async function initImageDiff(el: HTMLElement) {
+  await new ImageDiff().init(el);
 }