异步加载映像

Question

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

当选择该选项时，我只希望在图像完全加载时才更改该图像。

为此，我将执行一个$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 图像对象

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';