javascript - AngularJS - 如何从图像对象创建延迟对象

Question

我正在尝试通过简单的图像对象创建来创建一个延迟对象，如下所示:

var image = new Image();
image.src = 'some url';
image.onload = function() {
   // some code
}

现在...如何在 AngularJS 中使用 $q 库创建延迟对象？可能吗？

Answer 1

我假设有一些工厂，您计划在其中放置此功能。然后:

.factory('utils', function($q) {
    return {
        createImage: function(src) {
            var deferred = $q.defer(),
                image = new Image();
            image.onload = function() {
                deferred.resolve(image);
            };
            image.src = src;
            return deferred.promise;
        }
    };
});

然后你就可以像往常一样使用它:

utils.createImage('/assets/images/big-logo.png').then(function(imgObj) {
    console.log(imgObj);
});

Angular 1.3。从 Angular 1.3 版本开始，promise 服务 $q 也允许类似于原生的新语法 Promise构造函数。那么上面的函数就可以重写:

createImage: function(src) {
    return $q(function(resolve, reject) {
        var image = new Image();
        image.onload = function() {
            resolve(image);
        };
        image.src = src;
    });
}

您可以将这两个版本与 1.3 一起使用。

最后是简单的演示:http://plnkr.co/edit/MbQEDPHoAurFd6JwHTji?p=preview