Question

I have an array of URLs of content to load asynchronously, e.g.

var toLoad = ['snippet1.html', 'snippet2.html', ... ];

I’m trying to load each snippet with AJAX and append it to a parent <div>, maintaining the order of content in the array. Because of the way the rest of my code is set up (and for performance reasons), I don’t want to load in a synchronous manner, either with async:false or by chaining .ajax() calls, as suggested in answers to this similar question. Instead, I’d like to put logic in the AJAX callback function to place loaded snippets correctly, based on the index.

The following code works:

var $parent = $('#mydiv');
toLoad.forEach(function(url, i) {
    // load snippet
    $.get(url, function(snippet) {
        // attach order to DOM element
        snippet = $(snippet).data('order', i);
        // find the sibling with the next lowest order number
        var $prev = $parent
            .children()
            .filter(function() {
                return $(this).data('order') < i
            })
            .last();
        if ($prev[0]) snippet.insertAfter($prev); 
        else $parent.prepend(snippet);
    });
});

…but I don’t like it. In particular, I don’t like attaching the order to the DOM element with .data(); this seems ugly, and I’d rather not stick this into the DOM if I can help it.

Is there a better way to achieve the goal of asynchronously loading content into a div with a predefined order?

Answer 1

If your main gripe is using .data(), you could maintain your own array which associates dom node elements to values.

var map = [
    {order: 5, nodeReference: ...},
    {order: 9, nodeReference: ...},
    {order: 1, nodeReference: ...}
];
function data(node) {
    // loop through map, comparing to nodeReference to get the order 
}

//and then
…

    .filter(function() {
        return data(this) < i
    })

your code mostly stays the same, except you need to add to the map when you append something to the dom.

I would try hard to continue to progressively add things to dom as soon as they load, like you do now. I wouldn’t wait until everything is loaded, or even adding them in order. let the order work itself out eventually like you do now. this is how web browsers load images in web pages, and there’s deep reasons for it.