Utilizing angularjs and ui-grid with a custom cellTemplate, each cell contains an object referred to as COL_FIELD. This object is passed to a function that generates an image data URI used in the src attribute of the cellTemplate to display images within each cell.
An observation made when defining the custom cellTemplate using:
<img src="{{grid.appScope.getCachedImg(COL_FIELD)}}" />
...everything functions correctly, however, all cell functions across rows are evaluated upfront when the grid loads, making it slow to be responsive.
To test this, I changed the cell template to:
<img src="https://dummyimage.com/30x30/000/fff&text={{COL_FIELD.attributes.displayName[0]}}" />
...this solution works in the way desired, where only cells within the viewport trigger server calls.
What causes this discrepancy? How can I achieve the second behavior but with a function that returns an image data URI instead of requiring a server call for each cell? Is there a way to limit requests to only the cells currently visible on the screen?