异步加载图像

Question

当选择给定选项时，我需要加载多个Image文件。 默认情况下，已加载图像。

选择此选项后，我只想在图像完全加载时更改图像。

为此，我正在执行$http.get请求，如下所示：

$http.get('/public/images/city/amsterdam.jpg').success(function (data, status, headers, config) {
    // data loaded
});

加载数据后，我想将其分配给<img>或background-image。我怎么能用angularjs或javascript做到这一点？

Answer 1

您可以使用JavaScript image object

var myImage = new Image();
myImage.onLoad = function(){
    // data loaded
    // do stuff here, then apply so angular knows.
    $scope.$apply();
};
myImage.src = '/public/images/city/amsterdam.jpg';