Grid items showing up intermittently

[jwd2a]

When using the widget, grid items aren't displaying consistently. As you can see in the screenshow below, the first few items don't display, but the rest do. When I reload items into the grid (using addGridItems(), they all end up blank.

Here's how things look on initial load:

The code that produces this looks like this:

view.js

function populateGrid(flickr_photos){
    var items = [];
    _.each(flickr_photos, function(item){
        var imagePath = "https://farm"+item.farm+".staticflickr.com/"+item.server+"/"+item.id+"_"+item.secret+"_z.jpg";
        items.push({
            view: Alloy.createController("_flickrPreviewImage",{
                image: imagePath
            }).getView(),
            data: {
                image: imagePath
            }
        });
    });
    $.imageGrid.addGridItems(items); 
}

_flickrPreviewImage.xml

<Alloy>
    <View id="imageContainer">
    </View>
</Alloy>

_flickrPreviewImage.js

var args = arguments[0];

$.imageContainer.backgroundImage = args.image;

Let me know how I can help with debugging this, just not sure what to look for at this point. Also, if I call populateGrid again, all the items are blank.

[jwd2a]

FYI, just an update on this. This appears to be related to the images loading in the _flickrPreviewImage views. To test, I added a label to the view, thusly:

<Alloy>
    <View id="imageContainer">
        <Label>Test Image</Label>
    </View>
</Alloy>

And, as you can see, it shows up:

Is this related to the image request not completing before the views are rendered into the grid?

[jwd2a]

Closing this issue. This appears to be related to using a view with a background image, instead of using an ImageView. Using an ImageView, instead of a standard view, works fine.