Javascript:从没有base64-dataURL的自定义API将许多图像加载到DOM中

Contexst:我目前正在使用Angular构建一个web-app，并使用Silex编写API。

我有以下情况：

• 一个有数百个可点击缩略图的Angular页面。点击后，灯箱插件打开全尺寸图像
• API需要一个自定义的token-header来加载每张图片

很好，我想，我制作了API，所以它以base64编码的方式返回图像。很简单。将这个base64编码的数据设置为图像源甚至更简单：src = "data:image/jpeg;base64," + response;。这是使用ngSrc完成的，使其有点异步。lightbox使用锚标记的href从中加载图像(我使用Colorbox(，因此每张照片我都有两个相当大的base64数据URL。

然而，这造成了严重的问题。不是只有一张照片就立即出现，而是当照片数量开始增加时。随着base64 URL保留在DOM中，浏览器选项卡开始需要越来越多的内存。

我为此创建了一个临时解决方案，创建了一种自定义的Silex控制器，该控制器不从头部读取令牌，而是从查询字符串读取令牌。这允许我将图像源设置为类似于src = "http://api/img/1?token=" + token;的内容。数据URL及其内存饥饿的问题已经不复存在。

然而，将来API很可能会开始需要HTTP基本身份验证来获取图像。并且基本身份验证凭据不能通过查询字符串传递。它们需要标头才能发挥作用。因此，我的变通方法将不再有效。因此，这是一个真正的临时解决方案。

不过，我不完全确定如何解决这个问题。需要通过Ajax调用加载图像才能添加自定义标头。整个过程必须是异步的，以便加载尽可能快。加载图像后，无论显示多少图像，都不应该占用内存，或者至少不会占用太多内存来保持页面的性能。

我一直在考虑将基于base64的图像加载到canvas元素上。类似这样的东西：

$scope.loadThumbnails = function() {
  $scope.photos.forEach(function($photo){
    $photo.canvas_th = document.querySelector('canvas#' + $photo.id + '_th');
    var request = $http({                                                                               
      method: "GET",                              
      url: [URL]                                     
    });                                                                                                 
    var fetchThumbnailSuccess = function(response) {                                                    
      console.debug("Fetched thumbnail with id " + $photo.id);
      // Get drawing context
      var ctx = $photo.canvas_th.getContext("2d");
      // Create image with onload drawing to context
      var img = new Image();
      img.onload = function() {
        ctx.drawImage(img, 0, 0);
      }
      // Add data to image object, triggering the onload function which in turn draws the image to the context
      img.src = 'data:image/jpeg;base64,' + response;
    }                                                                                                   
    request.success(fetchThumbnailSuccess);                                                             
    var fetchThumbnailFailure = function(response) {                                                    
      console.error("Failed fetching thumbnail with id " + $photo.id);                                
      console.debug(response);                                                                        
    }                                                                                                   
    request.error(fetchThumbnailFailure);                                                               
  });                                                                                                     
}

然而，我不确定这是否会更具表演性。然而，我相信其他人以前一定也遇到过这种情况。我是不是忽略了什么？做了完全错误的事情？我很想得到一些帮助，因为我目前正忙于我不那么花哨的变通方法。。。任何人