Изображения после javascript показываются с задержкой и переупорядочением

Question

Я получаю код sr c для изображения из PHP и после шоу в HTML, но изображения показываются с задержкой. Как я могу показать изображения все вместе без переупорядочивания после загрузки? HTML

     <div id="keys"></div>

JS

function sendGETDataToServer() {
  // Set up our HTTP request
  var xhr = new XMLHttpRequest();
  // Setup our listener to process completed requests
  xhr.onreadystatechange = function () {
    // Only run if the request is complete
    if (xhr.readyState !== 4) return;
    // Process our return data
    if (xhr.status >= 200 && xhr.status < 300) {
      var JsonResponse = xhr.responseText;
      var response = JSON.parse(JsonResponse);
      console.log(response);
      if (response[0] == "200 OK") {
        var i;
        for (i = 0; i < response[1]; i++) {
          let img = document.createElement("img");
          img.src = response[2 + i].FilePath;
          img.setAttribute("style", "width:8%; padding-left:1em; float:left");

          $("#keys").append(img);
        }
      }
    } else {
      console.log("error", xhr);
    }
  };
  xhr.open("GET", "load.php");
  xhr.send();
}

Answer 1

Ваш код должен выглядеть примерно так

      if (response[0] == '200 OK') {
        var i;
        var nbLoaded = 0;
        var nbToLoad = 0;
        var pendingImages = [];
        for (i = 0; i < response[1]; i++) {
          nbToLoad++;
          let img = document.createElement('img');
          img.src = response[2 + i].FilePath;
          img.setAttribute('style', 'width:8%; padding-left:1em; float:left');
          img.onload = () => {
            nbLoaded++;
            if (nbLoaded === nbToLoad) {
              pendingImages.forEach((image) => {
                $('#keys').append(image);
              });
            }
          };
          pendingImages.push(img);
        }
      }

Answer 2

Краткий ответ на вашу проблему: на самом деле ее нет. Нет способа узнать, в каком порядке будут поступать ваши изображения, и вы определенно не можете контролировать задержку. То, что вы можете контролировать, - это порядок, в котором вы их показываете. Самый простой способ сделать это - подождать, пока вы не получите все свои изображения, и пока вы их получаете, вы сохраняете их где-то в массиве. После того, как вы получите окончательное изображение, вы можете просто упорядочить массив так, как вы хотите, чтобы ваши изображения отображались, и выполнить его, чтобы фактически разместить изображения на странице. Если вам нужна помощь со спецификой, пожалуйста, не стесняйтесь спрашивать!