nothingGrinder Blog

All Flash developers dealing with components like the DataGrid or the List component eventually run into the design limitations in Flash 8. We need a solution to load images into the grid or list. There are many solutions out there but 2 are most known.

1. HTML CellRenderer

2. Sephiroth Image CellRenderer

Each of these solution are great and very well known. They also seem to work perfectly with the DataGrid component. I ran into problems when trying to use these solutions with the List component.

Pitfalls with the HTML Cell Renderer in the List Component:

When using the HTML Image cell renderer we run into one major problem, Internet Explorer, FireFox, and Safari all render the HTML in different ways! This completely defeats the purpose of using the CellRenderer to modify the design of the List.

Pitfalls with Sephiroth’s Image CellRenderer solution:

Sephiroth uses the following setValue method in his CellRenderer:

Now the problem I ran into with the above solution was with scrolling the List too quickly. If I scroll down very quickly the images would not load. I think it has something to do with the transition between the ‘item[getDataLabel()]’ moving from true to false but never returning to true. So you scroll very quickly and the component doesn’t have enough time to register the current value of the items in the list so they remain unloaded… I am not sure to the exact problem but if you load 100 items into a list and each cell loads an image using the above solution, when you scroll the list very quickly, some of the image will remain unloaded! This is very bad.

Another problem I have with the above is the fact that you are using a Loader to do the work yet you are not using the Loader.Content or Loader.ContentPath properties. Sephiroth uses a loadMovie method instead of the better Contentpath solution.

So, using Sephiroth’s solution I modified it to solve all of the above issues. I use the Loader.content property to double check if the image has loaded or not. I compare that against the value of the item’s Label Data and if they both return false, I load the image again, if not, we don’t load anything. This works perfectly in all browsers and there is no worries about images not loading.