Angularjs等待div背景-图像显示
Angularjs等待div背景-图像显示
提问于 2016-01-27 02:58:24
我有以下从$http.post调用中获取数据并将其存储到$scope.data中的ng-repeat。
<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类将在背景图像出现在屏幕上之前加载。我希望在background-image实际加载之前什么都不会显示，但我还没能弄清楚。
有人有什么建议吗？
回答 8
Stack Overflow用户
发布于 2016-02-10 01:10:44
我不确定你的问题有没有真正的解决方案。一种解决方法是使用Image对象，如this answer中所述。例如，作为一个指令：
angular.module("yourModule").directive("showOnceBackgroundLoaded", [function () {
return {
restrict: "A",
scope: false,
link: function (scope, element, attributes) {
element.addClass("ng-hide");
var image = new Image();
image.onload = function () {
// the image must have been cached by the browser, so it should load quickly
scope.$apply(function () {
element.css({ backgroundImage: 'url("' + attributes.showOnceBackgroundLoaded + '")' });
element.removeClass("ng-hide");
});
};
image.src = attributes.showOnceBackgroundLoaded;
}
};
}]);使用：
<div ng-repeat="key in [] | range:data.pages">
<div class="pageBackground" id="page_{{ (key+1) }}" show-once-background-loaded="/images/{{data.id}}/{{(key+1)}}.png">
<!-- some random stuff here -->
</div>Stack Overflow用户
发布于 2016-02-16 23:08:03
在这里寻找解决方案：
How can I tell when a CSS background image has loaded? Is an event fired?
您要做的是创建一个不可见的partner元素来加载相同的图像。当且仅当该图像已加载(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>Stack Overflow用户
发布于 2016-01-27 03:12:02
您可以将启动函数延迟到图像加载。
var img = new Image();
img.onload = function(){
loadData();
};
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg';然后在html中放置一个ng-if="imageLoaded"，并在loadData函数中将其设置为true。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/35021688
复制相关文章
相似问题
腾讯云开发者
