Javascript Angularjs等待div背景图像显示

我有以下

ng repeat

，它从

$http.post

调用中获取数据并将其存储到

$scope.data

中

<div ng-repeat="key in [] | range:data.pages">
    <div class="pageBackground" id="page_{{ (key+1) }}" ng-style="{'background-image':'url(/images/{{data.id}}/{{(key+1)}}.png)'}">
    <!-- some random stuff here -->
</div>

通常情况下，

.pageBackground

类将在背景图像出现在屏幕上之前加载。在实际加载

背景图像之前，我不想显示任何内容，但我还没有弄清楚

有人有什么建议吗？
您可以延迟启动功能，直到图像加载

  var img = new Image();
  img.onload = function(){
    loadData();
  };
  img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';

然后在html中添加一个
ng if=“imageLoaded”
，并在
loadData
函数中将其设置为true。
我不确定是否有真正的解决方案。解决方法可以是使用对象，如中所述。例如，作为指令：

angular.module（“yourModule”）.directive（“showOnceBackgroundLoaded”，[function（）{
返回{
限制：“A”，
范围：假，
链接：功能（范围、元素、属性）{
元素addClass（“ng隐藏”）；
var image=新图像（）；
image.onload=函数（）{
//图像必须已被浏览器缓存，因此应快速加载
作用域：$apply（函数（）{
css（{backgroundImage:'url（'+attributes.showOnceBackgroundLoaded+'''）}）；
元素。removeClass（“ng隐藏”）；
});
};
image.src=attributes.showOnceBackgroundLoaded；
}
};
}]);

使用：

这里有一个指令，它将图像嵌入为背景，并等待图像加载后显示。您可以根据需要在“mysrc”参数中包含变量，以生成不同的图像（例如从ng repeat中）


角度模块（'foo'，[]）
.directive（'myPageBackground'，function（）{
返回{
范围：{
键：'='，//用于元素的ID；如果在指令外部设置ID，则可以忽略此项
mysrc:“=”//用于所需背景图像的URL
},
模板：“”，
链接：功能（范围）{
var img=新图像（）；
img.onload=函数（）{
scope.showMe=true；
作用域：$apply（）；
};
img.src=scope.mysrc；
}
}
});
.pageBackground{
宽度：200px；高度：200px；
}
如果您总是使用相同的
class=“pageBackground”
，则您的背景图像总是相同的。您可以将其加载到隐藏图像中，以便浏览器将其缓存：

<img src="url" style="display:none;"/>

我相信，该帖子是通过用户交互触发的，用户交互肯定是在页面加载后发生的，因此图像已经位于浏览器中，当您应用
class=“pageBackground”

希望这有帮助
 您可以使用指令而不是div。此外，您可以尝试使用一个小型的延迟加载图像库，例如

我希望这有帮助
 下面是一个使用图像对象的完整功能示例


函数AppCtrl（$scope）{
$scope.images=[{
src:'https://farm4.staticflickr.com/3261/2801924702_ffbdeda927_d.jpg'
}, {
src:'https://farm9.staticflickr.com/8455/8048926748_1bc624e5c9_d.jpg'
}];
angular.forEach（$scope.images，函数（image）{
var img=新图像（）；
img.onload=函数（）{
$scope.$apply（函数（）{
image.loadedSrc=image.src；
});
};
img.src=image.src；
});
}
.hasSrc{
颜色：紫色；
填充：10px；
}

这是正在使用的一些文本

本文本仅用于说明目的。

你可以从你的承诺中得到帮助。如果图像按承诺加载，则渲染视图，否则不渲染

您可能已选中此链接


谢谢
请在此处查找解决方案：


您要做的是创建一个不可见的伙伴元素，加载相同的映像。如果且仅当该图像已加载（onload事件），则显示其他元素，例如：

<div ng-repeat="key in [] | range:data.pages" ng-init="_imageLoaded={}">
    <div ng-show="_imageLoaded[$index]" class="pageBackground" id="page_{{ (key+1) }}" ng-style="{'background-image':'url(/images/{{data.id}}/{{(key+1)}}.png)'}">
    <img ng-show="false" src="/images/{{data.id}}/{{(key+1)}}.png" onload="_imageLoaded[$index] = true;" />
    <!-- some random stuff here -->
</div>


页面/图像的数量从未定义，并且图像总是来自不同的来源。对于我的例子来说，这个方法似乎有点乏味，但谢谢你的推荐。谢谢你的帮助，但这似乎不起作用。一旦div重新出现，背景图像仍会延迟显示该类始终是相同的，但如果您查看我的代码，
background image
属性会随着
ng style
@bryan抱歉，错过了，我的坏！你试过这种方法吗？你能创建一个复制这个问题的plnkr吗？在我看来@sp00m的答案应该有用。嗨，帕特里克，谢谢你的回复。我不确定
\u imageLoaded={}
是从哪里来的。无论如何，你可以给我更多的上下文。这些问题对我帮助不大：\hey，我使用imageLoaded对象来记住每个条目是否已加载相应的图像。因此_imageLoaded.0首先是未定义的-但是当加载$index=0的图像时，它会将条目设置为true-这发生在onload函数中。另一边的div有一个ng show“监听”这个变量。因此，当它从undefined切换到true时，将弹出div。这是图像加载的时间，因此是您要求的时间。imageLoaded只是实现它的一种方法
<div ng-repeat="key in [] | range:data.pages" ng-init="_imageLoaded={}">
    <div ng-show="_imageLoaded[$index]" class="pageBackground" id="page_{{ (key+1) }}" ng-style="{'background-image':'url(/images/{{data.id}}/{{(key+1)}}.png)'}">
    <img ng-show="false" src="/images/{{data.id}}/{{(key+1)}}.png" onload="_imageLoaded[$index] = true;" />
    <!-- some random stuff here -->
</div>