2

I am using angularjs and ui-grid with custom cellTemplate. Each cell has an object as COL_FIELD. This object is passed to a function which returns image data uri used in src attribute of cellTemplate so each cell renders an image.

I have noticed that when I define the custom cellTemplate as following:

<img src="{{grid.appScope.getCachedImg(COL_FIELD)}}" />

...Everything works BUT the functions for all cells and all rows are evaluated as the grid appears so it is slow to become responsive.

For testing purposes I tried the following cell template:

<img src="https://dummyimage.com/30x30/000/fff&text={{COL_FIELD.attributes.displayName[0]}}" />

...This works in the sense I wish as only the cells within the viewport make the server call.

What is the reason for this difference? How can I have this second behaviour but with a function returning image data uri instead of a server call returning it. ANd have only the viewports cells request this as scrolled up or down?

Al Ex Tsm
  • 2,042
  • 2
  • 29
  • 47

1 Answers1

0

Why to not use base64 image especially when you use 30x30? in this case you don't need to call http requests at all

 <img src="{{COL_FIELD.image}}" />

and:

{
   image: "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQEAYABgAAD//gA7Q1JFQVRPUjogZ2QtanBlZyB2MS4wICh1c2luZyBJSkcgSlBFRyB2NjIpLCBxdWFsaXR5ID0gNzAK/9sAQwAKBwcIBwYKCAgICwoKCw4YEA4NDQ4dFRYRGCMfJSQiHyIhJis3LyYpNCkhIjBBMTQ5Oz4+PiUuRElDPEg3PT47/9sAQwEKCwsODQ4cEBAcOygiKDs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7Ozs7/8AAEQgAIAAgAwEiAAIRAQMRAf/EAB8AAAEFAQEBAQEBAAAAAAAAAAABAgMEBQYHCAkKC//EALUQAAIBAwMCBAMFBQQEAAABfQECAwAEEQUSITFBBhNRYQcicRQygZGhCCNCscEVUtHwJDNicoIJChYXGBkaJSYnKCkqNDU2Nzg5OkNERUZHSElKU1RVVldYWVpjZGVmZ2hpanN0dXZ3eHl6g4SFhoeIiYqSk5SVlpeYmZqio6Slpqeoqaqys7S1tre4ubrCw8TFxsfIycrS09TV1tfY2drh4uPk5ebn6Onq8fLz9PX29/j5+v/EAB8BAAMBAQEBAQEBAQEAAAAAAAABAgMEBQYHCAkKC//EALURAAIBAgQEAwQHBQQEAAECdwABAgMRBAUhMQYSQVEHYXETIjKBCBRCkaGxwQkjM1LwFWJy0QoWJDThJfEXGBkaJicoKSo1Njc4OTpDREVGR0hJSlNUVVZXWFlaY2RlZmdoaWpzdHV2d3h5eoKDhIWGh4iJipKTlJWWl5iZmqKjpKWmp6ipqrKztLW2t7i5usLDxMXGx8jJytLT1NXW19jZ2uLj5OXm5+jp6vLz9PX29/j5+v/aAAwDAQACEQMRAD8A2rvUorSB5pnVFVSfmOM4Ga5WPx219cPBa6c7nHDF8Ko9WOPlHvW3rmmLNDcGRYZIrZPMfz5dsffKyAqfqMc5z06Vy8MNlcxvcxQuLF2PkxzY8y55HLkAHywR8q98DPGBXDClG2p1ym76FxfEN3dzb7aNY7EA/wCkSAlpTn+BcjKjpuPBx+FWktLu7KPvESEj593mSH39vwwKl0y2t2dLm7nAcMCcpkYHYD0+lP1TWdN8iVLK1EbOR5kucMw4PbtyOPx7VtCEE9hS5rGfr2pajrot5NRkS3tmH7uxt/mEeSBud/4n68Dp+NaN/pk10IJLCNBGqBVUHsB2PTHHrXPTxXFuZInO+2VgY2B5X1BH9av23iF9NsppLhribao8kR4G055ZjkEgD0z9RWdOpGeqNJU3TdpItL4e1i4DAhYhgHoT39RwPzq9ZeE7eINPcSmfa7HORsAIAwT90Hr/ABH6VXg1+aaFJJLmCKMgMCUVyfzLEflmnT67aZDyy3F7KORk4UHtgt0A9NvWtbozv2R//9k="
}

Plunker

Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225
  • Yes that is what I am using, but I don´t wanna generate the `data:image/jpeg;base64` in advance cause my grid holds thousands of rows and at least 6-12 columns so generating them becomes slow.... That is why I was thinking of the function call returning the `data:image/jpeg;base6` but for some reason this function is called for all the rows all columns, not just the ones part of the viewport in a given moment – Al Ex Tsm Sep 29 '17 at 11:38
  • The image returned by my function is basically generated programatically. On the bases of the COL_FIELD object an offscreen `plotly.js` graph is generated, transformed to svg and then the `data:image/jpeg;base64` is returned. So doing this 2000X12 times in advance is not an option... – Al Ex Tsm Sep 29 '17 at 11:48