AngularJS綁定基礎64編碼圖像減慢頁面加載

我正在開發聊天應用程序，其中對話可能有超過1000條消息與我顯示用戶照片的每條消息。AngularJS綁定基礎64編碼圖像減慢頁面加載

照片是base64編碼的字符串。

我對NG-src這串結合圖像，但由於有超過1000條短信綁定base64編碼字符串，每封郵件的照片減慢頁面加載

任何建議創建指令或其他任何

代碼：

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

來源

2016-05-20 Rajiv

你有沒有考慮使用綁定一次？ –

這是什麼意思 – Rajiv

https://toddmotto.com/angular-one-time-binding-syntax/ –

您可以嘗試使用畫布繪製圖像緩存在內存中。我寫了一個指令，就是這麼做的。

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

來源

2016-05-20 13:33:41 sielakos

AngularJS綁定基礎64編碼圖像減慢頁面加載

回答

相關問題