Javascript 为什么只有一个图像显示，而应该加载3个？

我遇到的问题是，只有一个图像（最后一个）被添加到div中

HTML:

Javascript:

matte_design_change_design_type();
function matte_design_change_design_type()
{
  var 
    count_matte_designs = 0,
    thumb_img,
    mattes_selected_type = 182;


  $(function()  //jquery .ready()
  {
    xml = get_xml();

        var output = [];
        $('component', xml).each(function(i, el) // jshint ignore:line 
        {
          count_matte_designs++;
          var thumb = $("thumb", this).text(),
              cid = $("cid", this).first().text(),
              name = $("name", this).first().text().replace("Collage - ", ""),
              alt = (name + "_" + cid),
              description = $("description", this).first().text();


          //https://bugs.chromium.org/p/chromium/issues/detail?id=7731, see comment 12
          thumb_img = new Image();
          thumb_img.id = 'cid_' + cid;
          thumb_img.alt = alt;
          thumb_img.src = ""; 
          thumb_img.addEventListener('load', function() {
            $('#cid_' + cid).replaceWith(thumb_img);

            //code
          }, false);
          thumb_img.addEventListener('click', function() {
            //code
          }, false);
          thumb_img.src = 'https://tecws.com/system/components/compimg/' + thumb + '/flashthumb';

          output.push('<span class="matte_design_image_name"><img id="cid_' + cid + '" /><br /><span class="matte_design_name" id="matte_design_name_' + mattes_selected_type + '_' + i + '">' + name + '</span></span>'); 

          $('#matte_designs_strip_wrapper').html(output.join('')); 

        }); 

        if (count_matte_designs > 0)
        {
            //code
        }
        else
        {
          $('#matte_designs_strip_wrapper').html("<p>Sorry, but there are no mattes of this type available.</p>");
        }
        //code




  });
}


function get_xml()
{
  return '<?xml version="1.0"?><components><component><cid>1721</cid><sku></sku><name>Single Opening - 4x6</name><description></description><description_list>0</description_list><pattern></pattern><thumb>168c619a1d1743bd4f3aba9d69a8c3ce</thumb><highres></highres><cpu>0.00</cpu><width>10</width><height>12</height><Order><size width="9.5" height="11.5"/><type>photo</type><Openings><opening><item><x>3</x><y>3</y><width>3.5</width><height>5.5</height><type>rectangle</type></item></opening></Openings><Mats><mat><item size="0"><imgsrc>[DEFAULT_MATTE_IMGSRC]</imgsrc><size>0</size><cid>[DEFAULT_MATTE_CID]</cid> </item></mat><mat><item size=".5"><imgsrc>[DEFAULT_MATTE1_IMGSRC]</imgsrc><size>0.5</size><cid>[DEFAULT_MATTE1_CID]</cid></item></mat><mat><item size=".5"><imgsrc>[DEFAULT_MATTE2_IMGSRC]</imgsrc><size>0.5</size><cid>[DEFAULT_MATTE2_CID]</cid></item></mat></Mats></Order></component><component>    <cid>1722</cid>    <sku></sku>    <name>Single Opening - 5"x7"</name>    <description></description>    <description_list>0</description_list>    <pattern></pattern>    <thumb>1dbc4769d6764631f02d14c867f1347d</thumb>    <highres></highres>    <cpu>0.00</cpu>    <width>11</width>    <height>13</height>    <Order>  <size width="10.5" height="12.5"/>  <type>photo</type>  <Openings>    <opening>        <item>            <x>3</x>            <y>3</y>            <width>4.5</width>            <height>6.5</height>            <type>rectangle</type>        </item>    </opening>     </Openings><Mats> <mat>       <item size="0">         <imgsrc>[DEFAULT_MATTE_IMGSRC]</imgsrc>         <size>0</size>                        <cid>[DEFAULT_MATTE_CID]</cid>                                 </item>    </mat>  <mat>       <item size="0.5">           <imgsrc>[DEFAULT_MATTE1_IMGSRC]</imgsrc>            <size>0.5</size>                        <cid>[DEFAULT_MATTE1_CID]</cid>                              </item>    </mat>  <mat>       <item size="0.5">           <imgsrc>[DEFAULT_MATTE2_IMGSRC]</imgsrc>            <size>0.5</size>                        <cid>[DEFAULT_MATTE2_CID]</cid>                              </item>    </mat></Mats></Order>  </component>  <component>    <cid>1723</cid>    <sku></sku>    <name>Single Opening - 8"x10"</name>    <description></description>    <description_list>0</description_list>    <pattern></pattern>    <thumb>4e72f7f4b3bb7ae271773eab634c2f11</thumb>    <highres></highres>    <cpu>0.00</cpu>    <width>14</width>    <height>16</height>    <Order>  <size width="13.5" height="15.5"/>  <type>photo</type>  <Openings>    <opening>        <item>            <x>3</x>            <y>3</y>            <width>7.5</width>            <height>9.5</height>            <type>rectangle</type>        </item>    </opening>      </Openings><Mats>   <mat>       <item size="0">         <imgsrc>[DEFAULT_MATTE_IMGSRC]</imgsrc>         <size>0</size>                        <cid>[DEFAULT_MATTE_CID]</cid>                                 </item>    </mat>  <mat>       <item size="0.5">           <imgsrc>[DEFAULT_MATTE1_IMGSRC]</imgsrc>            <size>0.5</size>                        <cid>[DEFAULT_MATTE1_CID]</cid>                              </item>    </mat>  <mat>       <item size="0.5">           <imgsrc>[DEFAULT_MATTE2_IMGSRC]</imgsrc>            <size>0.5</size>&gt;                        <cid>[DEFAULT_MATTE2_CID]</cid>                              </item>    </mat></Mats></Order>  </component></components>';
}

matte_design_change_design_type（）；
功能蒙版设计更改设计类型（）
{
变量
计数无光设计=0，
大拇指，
所选蒙版类型=182；
$（function（）//jquery.ready（）
{
xml=get_xml（）；
var输出=[]；
$（'component'，xml）.each（函数（i，el）//jshint ignore:line
{
count_matte_designs++；
var thumb=$（“thumb”，this）.text（），
cid=$（“cid”，this）.first（）.text（），
name=$（“name”，this）.first（）.text（）.replace（“拼贴-”，“”），
alt=（名称+字符+cid），
description=$（“description”，this）.first（）.text（）；
//https://bugs.chromium.org/p/chromium/issues/detail?id=7731，见评论12
thumb_img=新图像（）；
thumb_img.id='cid_u'+cid；
thumb_img.alt=alt；
thumb_img.src=“”；
thumb\u img.addEventListener（'load'，function（））{
$（'#cid'+cid）.替换为（thumb_img）；
//代码
}，假）；
thumb_img.addEventListener（'单击'，函数（））{
//代码
}，假）；
thumb_img.src=https://tecws.com/system/components/compimg/“+thumb+”/flashthumb”；
输出.推送（'[DEFAULT_MATTE_IMGSRC]0[DEFAULT_MATTE_CID][DEFAULT_MATTE1_IMGSRC]0.5[DEFAULT_MATTE1_CID][DEFAULT_MATTE2_IMGSRC]0.5[DEFAULT_MATTE2_CID]1722单开门-5“x7”0 1DBC47669D676463F02D14C867F1347D 0.00 11 13照片3 4.5 6.5矩形[默认无光IMGSRC]0[默认无光CID][DEFAULT_mate1_IMGSRC]0.5[DEFAULT_mate1_CID][DEFAULT_mate2_IMGSRC]0.5[DEFAULT_mate2_CID]1723单孔-8“x10”0 4e72f7f4b3bb7ae271773eab634c2f11 0.00 14 16照片3 7.5 9.5矩形[DEFAULT_MATTE_IMGSRC]0[DEFAULT_MATTE_CID][DEFAULT_mate1_IMGSRC]0.5[DEFAULT_mate1_CID][DEFAULT_mate2_IMGSRC]0.5[DEFAULT_mate2_CID]；
}

生成的HTML：

<div id="matte_designs_strip_wrapper">
  <span class="matte_design_image_name">
    <img id="cid_1723" alt="Single Opening - 8&quot;x10&quot;_1723" src="https://tecws.com/system/components/compimg/4e72f7f4b3bb7ae271773eab634c2f11/flashthumb">
    <br>
    <span class="matte_design_name" id="matte_design_name_182_0">Single Opening - 4x6</span>
  </span>
  <span class="matte_design_image_name"><br>
    <span class="matte_design_name" id="matte_design_name_182_1">Single Opening - 5"x7"</span>
  </span>
  <span class="matte_design_image_name">
    <br><span class="matte_design_name" id="matte_design_name_182_2">Single Opening - 8"x10"</span>
  </span>
</div>

单开口-4x6


单孔-5“x7”

单孔-8“x10”

---

为什么在循环中使用.html而不是在循环完成时使用？通过使用：

$（'#cid_'+cid）.replaceWith（thumb_img）；

您正在操作一个尚未创建的元素

---

而不是使用

thumb\u img=new Image（）

尝试将src、alt等直接放在输出中，这样做是不可能的

看起来每次迭代都会覆盖上一次迭代，而不是附加运行示例并检查生成的img url，我看到随机的二进制内容。我认为图像生成服务无法正常工作。@LelioFaieta-我不是sure你是什么意思，你能进一步解释吗？@Raphael-你是什么意思，你看到的是随机的二进制内容？当我在浏览器中查看图像时，它看起来很好。我运行了你的示例，检查了代码，复制了生成的url:

https://tecws.com/system/components/compimg/4e72f7f4b3bb7ae271773eab634c2f11/flashthumb

并在浏览器中打开。它间歇性地失败。我正在尝试在将图像添加到div之前加载它。我不知道为什么您认为它还没有被创建，因为

$（''cid'+cid.）.replaceWith（thumb\u img）；

在load addEventListener中。所以即使我移动

$（'matte\u designs\u strip\u wrapper'）.html（output.join（''）

在循环之外，它具有相同的效果。您应该为图像添加一个容器，使用append而不是HTML，以便在每个循环上追加，追加后，执行$（'#container_'+uid）.HTML（thumb_img）；图像在一个容器中

。我不确定您所说的其余部分是什么意思，因为您说过要将.html部分移到循环之外

<div id="matte_designs_strip_wrapper">
  <span class="matte_design_image_name">
    <img id="cid_1723" alt="Single Opening - 8&quot;x10&quot;_1723" src="https://tecws.com/system/components/compimg/4e72f7f4b3bb7ae271773eab634c2f11/flashthumb">
    <br>
    <span class="matte_design_name" id="matte_design_name_182_0">Single Opening - 4x6</span>
  </span>
  <span class="matte_design_image_name"><br>
    <span class="matte_design_name" id="matte_design_name_182_1">Single Opening - 5"x7"</span>
  </span>
  <span class="matte_design_image_name">
    <br><span class="matte_design_name" id="matte_design_name_182_2">Single Opening - 8"x10"</span>
  </span>
</div>