How would I dynamically populate UIGrid on scroll when the items are visible

I am using UIDraggablePanel and UIGrid and want to dynamically generate an image in UIGrid when the item is visable and then destroy it when it is not visible.

What happens at the moment is that UIGrid is built and for each grid item a image is dynamically generated for all items. This means that if I have 500 items yet I am only showing 20 as visible all 500 are generated. This causes issues on performance.

I am therefore wanting to make it so the image only gets generated when it is visible and when the user scrolls it will destroy the previous images and then generate the next 20 when they stop scrolling.

How do I do this? Can I detect when the item is visible and then fire off the image generation?

 

UIPanel has a Vector4 clipRange value witch you could use to check whether something is in the frame or not
to optimize further it also has a bool changedLastFrame value

i haven't tested this but i think these vars could do the trick

Smobby

 

I have setup the following but it says everything is visible which is not correct.

public UIPanel panel;

bool Visible ()
{

Bounds itemBounds = new Bounds (transform.position + boundsReference.center, boundsReference.size);
Vector3 size = Vector3.Scale (
panel.transform.lossyScale,
new Vector3 (panel.clipRange.z, panel.clipRange.w, 1.0f)
);

size.z = 10.0f;

panelBounds.size = size;

panelBounds.center = panel.transform.position + Vector3.Scale (
panel.transform.lossyScale,
new Vector3 (panel.clipRange.x, panel.clipRange.y, 1.0f)




);

return itemBounds.Intersects (panelBounds);
}

void Update ()
{
bool wasVisible = visible;

visible = Visible ();


if (wasVisible !visible){
portrait.enabled = true;

}
else if (!wasVisible visible){
portrait.enabled = false;

}

}