Question

我正在开发聊天应用程序，其中对话可能包含超过1000条消息，每条消息都显示用户照片。

Photo是base64编码的字符串。

我通过ng-src将此字符串绑定到图像，但是因为有超过1000条消息将base64编码的字符串绑定到每条消息的照片减慢页面加载

创建指令或其他任何建议

码

<div data-ng-repeat="message in messages">
   <img data-ng-src="{{message.usr.photoEncodedString}}"/>
   {{message.text}}
</div>

Answer 1

您可以尝试使用画布来绘制缓存在内存中的图像。我写了指令就是这么做的。

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 = new Image();
          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

AngularJS绑定基础64编码图像减慢页面加载

1 个答案: