如何在一个函数中追加两张相同图片？JS代码渲染异常求助

核心问题1：自定义标签imgIn的错误使用 #

你用document.createElement('imgIn')创建了非标准HTML标签，浏览器虽允许自定义元素，但这并非合理做法——这不是img无法追加的直接原因，但应修正为标准img标签，通过ID或class区分两个图层。

核心问题2：循环中重复绑定loadend事件 #

在for循环内每次调用reader.addEventListener('loadend', ...)，会导致同一个reader被绑定数百个事件监听器。当loadend触发时，所有监听器都会执行，异步逻辑的混乱会直接干扰DOM元素的追加操作。

修复后的代码示例 #

function hueChange() {
  // 仅绑定一次loadend事件，避免重复触发
  reader.addEventListener('loadend', () => {
    const screenWidth = window.innerWidth;
    for(let image = 0; image < mosaicCount; image++) {
      // 创建第一个img元素
      const img = document.createElement('img');
      img.id = `img-${image}`; // 给ID加前缀，避免纯数字ID的潜在冲突
      img.style.width = `${screenWidth/16}px`;
      img.src = reader.result;
      dropzone.append(img);

      // 创建第二个img元素（替换原自定义标签imgIn）
      const imgIn = document.createElement('img');
      imgIn.id = `imgIn-${image}`;
      imgIn.style.width = `${screenWidth/16}px`;
      imgIn.src = reader.result;
      // 可通过样式区分两个图层，比如设置透明度
      imgIn.style.opacity = '0.5';
      dropzone.append(imgIn);
    }
  });
}

关键修正点 #

• 替换自定义imgIn标签为标准img，通过ID前缀区分两个系列的图片
• 将loadend事件绑定移到循环外，确保仅触发一次，再在回调内执行元素创建逻辑，避免异步混乱
• 用style.width替代setAttribute设置宽度，更符合DOM操作规范，避免属性设置的潜在问题
• 给纯数字ID添加前缀，规避部分场景下的选择器兼容问题

额外性能优化建议 #

大量创建img元素时，建议使用DocumentFragment批量追加，减少DOM重绘次数：

function hueChange() {
  reader.addEventListener('loadend', () => {
    const screenWidth = window.innerWidth;
    const fragment = document.createDocumentFragment();
    for(let image = 0; image < mosaicCount; image++) {
      const img = document.createElement('img');
      img.id = `img-${image}`;
      img.style.width = `${screenWidth/16}px`;
      img.src = reader.result;
      fragment.append(img);

      const imgIn = document.createElement('img');
      imgIn.id = `imgIn-${image}`;
      imgIn.style.width = `${screenWidth/16}px`;
      imgIn.src = reader.result;
      imgIn.style.opacity = '0.5';
      fragment.append(imgIn);
    }
    // 一次性将所有元素追加到dropzone
    dropzone.append(fragment);
  });
}

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