使用 AngularJS 预加载来自不同服务器的图像

Question

背景：

我正在尝试在 AngularJS 应用程序中预加载一些图像，然后再将它们呈现给用户以防止它们“剥落”。我的预加载工具会在图像下载后返回一个已解决的承诺。

目前的做法：

目前我正在使用简单的$http 调用来下载图像。想象一下element 是一个<img> 标签，里面有我的图片：

$http.get("my/image/url.jpg")
  .then( function() { 
    $animate.enter(element);
  });

这似乎工作正常，但如果有更好的方法，我将不胜感激。

问题

我认为我遇到了 CORS 的问题。此预加载器的一个应用是从 twitter 加载个人资料图片。当我这样做时，我的$http.get 在控制台中抛出一个错误：

XMLHttpRequest cannot load https://path/to/img.jpg. 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://my.server.com' is therefore not allowed access.

有没有办法预加载这种图像？

我创建了一个 very simple plunkr 来演示问题 - 您需要打开控制台才能看到错误。

Answer 1

使用一种标准方法来预加载图像 - 屏幕上未显示的 img 标记仍会强制加载图像。

结合 Angular，听起来像预加载器指令会完美运行。

无需重新发明轮子，只需充分利用 Angular。