Angularjs Binding Base 64 Encoded Image Slowing Down Page Load

I am developing chat application in which conversation may have more than 1000 messages with each message i am showing user photo . Photo is base64 encoded string. I am binding thi

Solution 1:

You can try to use canvas to draw image cached in memory. I have written directive that does just that.

angular
  .module('app')
  .directive('cachedImage', ($timeout) => {
    const images = {};

    return {
      restrict: 'E',
      template: '<canvas width="20" height="20"></canvas>',
      scope: {
        name: '=',
        imgData: '='
      },
      link: (scope, element) => {
        const canvas = element.find('canvas');
        let img;

        if (images[scope.name]) {
          img = images[scope.name];
        } else {
          img = newImage();
          img.src = scope.imgData;

          images[scope.name] = img;
        }

        $timeout(() => {
          const ctx = canvas[0].getContext("2d");
          ctx.drawImage(img,0,0,20, 20);
        });
      }
    };
  });

codepen: http://codepen.io/sielakos/pen/eZwKKO?editors=1010