JavaScript加载来自Ajax的图像列表

Question

我正在尝试从Ajax结果中加载对象列表中的图像。

HTML-PDF

但上面的代码只加载列表中的最新图像。请告诉我如何在循环过程中执行此操作的正确语法。

Answer 1

试试这个

更新语句，如

  newImg.key = key;
  newImg.onload = function() {
    var _img = document.getElementById('image' + this.key);
    _img.src = this.src;
  }

＆＃13;

＆＃13;

$('#div-images').empty();
var data = {
 listImage: [
 {IMAGE_URL: "http://www.wordapp.io/wpsite/wp-content/uploads/2017/01/google-ranking-factors.png"},
 {IMAGE_URL: "http://pukdigital.com/wp-content/uploads/2017/10/googles-new-logo-5078286822539264.3-hp2x.gif"}
 ]
}
for (var key in data.listImage) {
  var mi = data.listImage[key];
  var image_url = mi.IMAGE_URL;
  var image_tag = '<img id=image' + key + ' width="50" height="50" />';
  $('#div-images').append(image_tag);

  // load image  
  var newImg = new Image(key);
  newImg.key = key;
  newImg.onload = function() {
    var _img = document.getElementById('image' + this.key);
    _img.src = this.src;
  }
  newImg.src = image_url;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="div-images"></div>

＆＃13;

＆＃13;

＆＃13;