Given a list of images, how do I get them to appear in order in JavaScript / HTML?
<p>I am building a Flask app where my webpage receives a list of images (and their metadata) in a particular order to display in a grid structure, similar to how a clothing website shows images of clothing. The problem is that, currently, the images are appearing in the order of fastest loading and, hence, I get a different order of images each time I reload the page. </p>

<p>The <code>get_similar_images</code> function is where I receive the list of images and the function <code>populateImages</code> is where I actually append this image and its metadata to my html. </p>

<p>Essentially, I do not want the <code>for</code> loop in <code>get_similar_images</code> to move onto the next iteration until the previous image is fully loaded. Appreciate any help on how to implement this!</p>

<pre><code>function populateImages(imageUrl, retailer, name, price, retailerUrl) {
    var block = document.createElement("div");
    block.className = 'image-block';

    var img = document.createElement("img");
    img.src = imageUrl;
    img.className = 'clickable-image';

    // link to external site
    var clickableLink = document.createElement("a");
    clickableLink.href = retailerUrl;
    clickableLink.target = "_blank";
    clickableLink.appendChild(img);

    // add metadata        
    var description = document.createElement("div");

    var retailerName = document.createElement("p");
    retailerName.className = 'description-text';
    var retailerNameText = document.createTextNode(retailer);
    retailerName.appendChild(retailerNameText);
    description.appendChild(retailerName);

    var productName = document.createElement("p");
    productName.className = 'description-text';
    var productNameText = document.createTextNode(name);
    productName.appendChild(productNameText);
    description.appendChild(productName);

    var productPrice = document.createElement("p");
    productPrice.className = 'description-text';
    var productPriceText = document.createTextNode('$'+price);
    productPrice.appendChild(productPriceText);
    description.appendChild(productPrice);

    // resize image
    var actualH;
    var actualW;
    var newH;
    var newW;
    img.onload = function() {
        actualW = this.width;
        actualH = this.height;
        var newSize = scaleSize(300, 300, actualW, actualH);
        this.width = newSize[0];
        this.height = newSize[1];
        block.appendChild(clickableLink);
        block.appendChild(description);
        document.getElementById('imageDiv').appendChild(block);
    }; 
}

function get_similar_images(image_name) {
    $.ajax({
        type: "POST",
        contentType: "application/json; charset=utf-8",
        url: "/get_similar",
        dataType: "json",
        async: true,
        data: JSON.stringify({name: image_name}),
        success: function(data) {
            var image_list = data.images;
            var category = data.category;
            var retailers = data.retailers;
            var names = data.names;
            var prices = data.prices;
            var urls = data.urls;
            for (var i=0; i&lt;image_list.length; i++) {
                var url = "static/products/"+category+"/"+image_list[i];
                populateImages(url, retailers[i], names[i], prices[i], 
                    urls[i])
            }
        },
        error: function(xhr, status, error) {
        }
    });
}
</code></pre>