DOM加载完成后如何用jQuery将图片按双卡片网格插入DOM展示

• 预期逻辑：等待页面所有图片加载完成后，获取指定div内的全部图片，插入双卡片网格模板，遍历图片生成多组双卡片网格
• 当前问题：内容无法正常在DOM中渲染展示

1. 模板仅初始化一次，ID全局重复：函数开头定义的template变量是固定值，仅会使用初始sectioncount=0生成，后续sectioncount递增时模板不会同步更新，所有插入的网格模板ID完全重复，后续通过ID查找卡片元素会匹配失败，图片无法插入到对应位置。
2. 核心逻辑未触发：$(document).ready回调中没有调用moveImages函数，所有代码逻辑不会自动运行。
3. 触发时机不符合要求：$(document).ready仅在DOM结构解析完成时触发，此时页面图片可能还未加载完成，不满足「所有图片加载完成后执行」的要求。
4. 标签未闭合：插入span的代码中结束标签缺少斜杠，会导致DOM结构错乱。
5. 跳过首图逻辑错误：当前代码逻辑不会跳过第一张图片，和预期需求不符。

function moveImages() {
  const $gallery = $('#gallery');
  let imgcount = 1;
  let sectioncount = 0;

  // 模板改为动态生成函数，每次传入最新sectioncount生成唯一ID
  function getTemplate(sectionId) {
    return `<section class="card-grid-section section-${sectionId}" loading="lazy">
      <a class="card-grid-two-image">
        <div>
          <picture id="card-one-two-grid-section-${sectionId}">
          </picture>
        </div>
      </a>
      <a class="card-grid-two-image">
        <div>
          <picture id="card-two-two-grid-section-${sectioncount}">
          </picture>
        </div>
      </a>
    </section>`;
  }

  $('#article-text').find('p').each(function() {
    // 用children替代childNodes，仅遍历元素节点，跳过空白文本节点
    const children = this.children;
    Array.from(children).forEach(item => {
      if(item.tagName === "SPAN"){
        // 修复span闭合标签
        $gallery.append(`<p><span>${item.innerHTML}</span></p>`);
      } else if(item.tagName === "IMG"){
        // imgcount>1时才处理，跳过第一张图片
        if(imgcount > 1){
          const pos = (imgcount - 1) % 2;
          if(pos === 1){
            // 每组第一张图，先插入新网格模板
            $gallery.append(getTemplate(sectioncount));
            const $card1 = $(`#card-one-two-grid-section-${sectioncount}`);
            $card1.append(item);
          } else if(pos === 0){
            // 每组第二张图，插入同组第二个卡片
            const $card2 = $(`#card-two-two-grid-section-${sectioncount}`);
            $card2.append(item);
            sectioncount++;
          }
        }
        imgcount++;
      }
    });
  });
}

// 监听window.load事件，等待所有图片加载完成后执行逻辑
$(window).on('load', function() {
  moveImages();
});

内容的提问来源于stack exchange，提问作者user9064568