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

Question

背景：

我正在尝试在 AngularJS 应用程序中预加载一些图像，然后再将它们呈现给用户以防止它们被 "peeling" 加载。我的预加载工具是 return 一个承诺下载图片后解决。

当前方法：

目前我正在使用一个简单的 $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。

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

Preloading images from different servers with AngularJS

preloading

cors

angularjs

背景：

当前方法：

问题