如何正确循环加载图像？

Question

我有一个循环，调用一个加载图像的函数。 它无法正常工作。 图像全部加载，但是它们都被附加到最后一个div。

对于此示例，页面上有三个div：

<div id="opening_0"></div>
<div id="opening_1"></div>
<div id="opening_2"></div>

Javascript：

$.ajax(
{
  type: "GET",
  url: xml_source, //call this url  - SEE XML BELOW
  dataType: 'xml',
  async: false,
  success: function(xml) //if we have data...
  {
    openings = $(xml).find("opening"); //Find the openings in the xml
    mattes_create_openings(openings);
  }
});

function mattes_create_openings(openings)
{
  $(openings).each(function(i, el) //loop through the openings xml
  {
    //more code...
    var photos_selected_fid = $(el).find("imgsrc").text(); 
    clipX = 0;
    clipY = 0;
    photos_create_preview_image(document.getElementById("opening_" + i), clipX, clipY, photos_selected_fid); 
  });
}

function photos_create_preview_image(element, clipX, clipY, photos_selected_fid)
{
  photos_selected_opening = element.id; //Sets the selected opening to the div that calls this function
  photos_selected_opening_value = photos_selected_opening.replace("opening_", "");

  var new_img = new Image();
  new_img.onload = function()
  {
    $(element).empty(); //Empty the div
    element.appendChild(new_img); //Append the image to the div
  }
  new_img.src = SITE_URL + "/system/photo/cf_preview/" + photos_selected_fid; //Set the source of the image
}

加载的XML：

<?xml version="1.0"?>
<Order>
  <size width="20" height="10">
    <width>20</width>
    <height>10</height>
  </size>
  <type>photo</type>
  <overlay/>
  <Mats selected_type="17" selected_design="81">
    <mat layer_name="top">
      <item size="0">
        <imgsrc>11852997eab43ff5c7b1803692bee608</imgsrc>
        <size>0</size>
        <cpu/>
        <cid>4208</cid>
        <id/>
      </item>
      <fillet index="0">
        <imgsrc>5ade25e607b6302691c318a94792e6eb</imgsrc>
        <width>0.31</width>
        <cid>9349</cid>
        <sku>TD00060GL1</sku>
      </fillet>
    </mat>
  </Mats>
  <Openings>
    <opening>
      <item>
        <x>7.75</x>
        <y>1.75</y>
        <width>4.5</width>
        <height>6.5</height>
        <type>rectangle</type>
        <clipX>0</clipX>
        <clipY>0</clipY>
        <imgsrc>a0d3b6664b2fef68c279c5f58e6af5d6</imgsrc>
        <photos_hires_width>1024</photos_hires_width>
        <photos_hires_height>768</photos_hires_height>
      </item>
    </opening>
    <opening>
      <item>
        <x>14</x>
        <y>2.25</y>
        <width>3.5</width>
        <height>5.5</height>
        <type>rectangle</type>
        <clipX>0</clipX>
        <clipY>0</clipY>
        <imgsrc>148d39e78620ed03dc6bf0fee199ec97</imgsrc>
        <photos_hires_width>1024</photos_hires_width>
        <photos_hires_height>768</photos_hires_height>
      </item>
    </opening>
    <opening>
      <item>
        <x>2.5</x>
        <y>2.25</y>
        <width>3.5</width>
        <height>5.5</height>
        <type>rectangle</type>
        <clipX>0</clipX>
        <clipY>0</clipY>
        <imgsrc>971e9044a3f1fca2291d62d64470a1bd</imgsrc>
        <photos_hires_width>1024</photos_hires_width>
        <photos_hires_height>768</photos_hires_height>
      </item>
    </opening>
  </Openings>
  <Moulding>
    <imgsrc>5f52a13c425655fa62058418542b95ca</imgsrc>
    <width>1.13</width>
    <cid>174</cid>
    <sku>TD01600B0</sku>
    <cpu>0.00</cpu>
  </Moulding>
  <Glass>
    <cid>GAPC</cid>
  </Glass>
</Order>

我有一个jsfiddle： http : //jsfiddle.net/allisonc/am83wp4m/1/当我运行jsfiddle时，它尝试将源设置为所有它们的组合（例如：SITE_URL +“ / system / photo / cf_preview /” + imgsrc1 + imgsrc2 + imgsrc3）

Answer 1

请参阅： http ： //jsfiddle.net/allisonc/am83wp4m/2/

var openings = document.createElement("Openings");
var opening1 = document.createElement("opening");
var imgsrc1 = document.createElement("imgsrc");
imgsrc1.appendChild(document.createTextNode("a0d3b6664b2fef68c279c5f58e6af5d6"));
opening1.appendChild(imgsrc1);
openings.appendChild(opening1);

var opening2 = document.createElement("opening");
var imgsrc2 = document.createElement("imgsrc");
imgsrc2.appendChild(document.createTextNode("148d39e78620ed03dc6bf0fee199ec97"));
opening2.appendChild(imgsrc2);
openings.appendChild(opening2);

var opening3 = document.createElement("opening");
var imgsrc3 = document.createElement("imgsrc");
imgsrc3.appendChild(document.createTextNode("971e9044a3f1fca2291d62d64470a1bd"));
opening3.appendChild(imgsrc3);
openings.appendChild(opening3);

var new_openings = $(openings).find("opening"); 
mattes_create_openings(new_openings);

function mattes_create_openings(openings)
{
  $(openings).each(function(i, el) //loop through the openings xml
  {
      console.log(el);
      console.log(i);

    //more code...
    var photos_selected_fid = $(el).find("imgsrc").text(); 
    console.log(photos_selected_fid);
    clipX = 0;
    clipY = 0;
    //photos_create_preview_image(document.getElementById("opening_" + i), clipX, clipY, photos_selected_fid); 
    photos_create_preview_image(document.getElementById("opening_" + i), clipX, clipY, photos_selected_fid); 
  });
}

function photos_create_preview_image(element, clipX, clipY, photos_selected_fid)
{

  var photos_selected_opening = element.id; //Sets the selected opening to the div that calls this function
  var photos_selected_opening_value = photos_selected_opening.replace("opening_", "");

  var new_img = new Image();
  new_img.onload = function()
  {
    $(element).empty(); //Empty the div
    element.appendChild(new_img); //Append the image to the div

  }
  new_img.src = "http://example.com" + "/system/photo/cf_preview/" + photos_selected_fid; //Set the source of the image
}

Answer 2

可能是这样

    var yourxml = '<your xml data>';
    $($.parseXML(yourxml)).find('opening').each(function (index, opening) {
        $('#opening_'+index).html('<img src= "http://example.com/system/photo/cf_preview/"' + $(opening).find('imgsrc').text() + ' />');
    });

Answer 3

您的代码是正确的，只有一件事：我将其粘贴到以下代码块中，对其进行调整以具有有效的图像和单独的div背景，并在迭代中看到一个问题。 确实，jQuery的.each()从索引0进行迭代，这意味着您应该使用i + 1或从0创建opening_#容器

http://plnkr.co/edit/8zrEfRfq1dtAeX5voUfK?p=preview

请参阅在柱塞中：

photos_create_preview_image(document.getElementById("opening_" + (i+1)), clipX, clipY); 

请注意，我用背景色分隔了opening_# ：

  <div id="opening_1" style="background:red"></div>
  <div id="opening_2" style="background:green"></div>
  <div id="opening_3" style="background:blue"></div>
  <!-- Include your script AFTER your image containers -->
  <script src="script.js"></script>

确保您的js脚本包含在 DOM元素之后（在HTML body的末尾）