blocks|key|3513812|text|您可以将启动函数延迟到图像加载。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3513813|++var+img+=+new+Image();
++img.onload+=+function(){
++++loadData();
++};
++img.src+=+'https://mdn.mozillademos.org/files/5397/rhino.jpg';|code-block|syntax|javascript|3513814|然后在html中放置一个ng-if="imageLoaded"，并在loadData函数中将其设置为true。|offset|length|style|CODE|3513815|entityMap^0|0|0|C|J|Y|8|0^^$0|@$1|2|3|4|5|6|7|O|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|P|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|Q|8|@$I|R|J|S|K|L]|$I|T|J|U|K|L]]|9|@]|A|$]]|$1|M|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|N|$]]

<p>You can delay your startup function until the image loads.</p>

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

<p>Then put an <code>ng-if="imageLoaded"</code> in the html and set that to true in the <code>loadData</code> function.</p>


blocks|key|2371075|text|我不确定你的问题有没有真正的解决方案。一种解决方法是使用Image对象，如this+answer中所述。例如，作为一个指令：|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|2371076|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("'+%2B+attributes.showOnceBackgroundLoaded+%2B+'")'+});
++++++++++element.removeClass("ng-hide");
++++++++});
++++++};
++++++image.src+=+attributes.showOnceBackgroundLoaded;
++++}
++};
}]);|code-block|syntax|javascript|2371077|使用：|2371078|<div+ng-repeat="key+in+[]+%7C+range:data.pages">
++++<div+class="pageBackground"+id="page_{{+(key%2B1)+}}"+show-once-background-loaded="/images/{{data.id}}/{{(key%2B1)}}.png">
++++
</div>|2371079|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image|1|https://stackoverflow.com/a/9790445/1225328^0|S|5|0|11|B|1|0|0|0|0^^$0|@$1|2|3|4|5|6|7|W|8|@]|9|@$A|X|B|Y|1|Z]|$A|10|B|11|1|12]]|C|$]]|$1|D|3|E|5|F|7|13|8|@]|9|@]|C|$G|H]]|$1|I|3|J|5|6|7|14|8|@]|9|@]|C|$]]|$1|K|3|L|5|F|7|15|8|@]|9|@]|C|$G|H]]|$1|M|3|-4|5|6|7|16|8|@]|9|@]|C|$]]]|N|$O|$5|P|Q|R|C|$S|T]]|U|$5|P|Q|R|C|$S|V]]]]

<p>I'm not sure there is a real solution for your problem. A workaround could be to use the <a href="https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image" rel="nofollow noreferrer">Image</a> object, as explained in <a href="https://stackoverflow.com/a/9790445/1225328">this answer</a>. For example as a directive:</p>

<pre class="lang-js prettyprint-override"><code>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;
    }
  };
}]);
</code></pre>

<p>Use:</p>

<pre class="lang-xml prettyprint-override"><code>&lt;div ng-repeat="key in [] | range:data.pages"&gt;
    &lt;div class="pageBackground" id="page_{{ (key+1) }}" show-once-background-loaded="/images/{{data.id}}/{{(key+1)}}.png"&gt;
    &lt;!-- some random stuff here --&gt;
&lt;/div&gt;
</code></pre>


blocks|key|3513842|text|这是一个指令，它将你的图像作为背景嵌入，并等到图像加载完成后才显示出来。您可以根据需要在"mysrc“参数中包含变量，以生成不同的图像(例如在ng-repeat中)。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3513843|​|3513844|angular.module('foo',+[])
++.directive('myPageBackground',+function()+{
++++return+{
++++++scope:+{
++++++++key:+'=',+//+used+for+ID+of+the+element;+if+you+set+the+ID+externally+to+the+directive+you+could+omit+this
++++++++mysrc:+'='+//+used+for+the+URL+of+the+desired+background+image
++++++},
++++++template:+'<div+ng-show="showMe"+class="pageBackground"+id="page_{{key}}"+ng-style="{\'background-image\':\'url({{mysrc}})\'}"></div>',
++++++link:+function(scope)+{
++++++++var+img+=+new+Image();
++++++++img.onload+=+function()+{
++++++++++scope.showMe+=+true;
++++++++++scope.$apply();
++++++++};
++++++++img.src+=+scope.mysrc;
++++++}
++++}
++});|code-block|syntax|javascript|3513845|.pageBackground+{
++width:+200px;+height:+200px;
}|3513846|<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div+ng-app="foo">
++
++<div+my-page-background+key="'1'"+mysrc="'http://placehold.it/200x200'"></div>
++<div+my-page-background+key="'2'"+mysrc="'http://placehold.it/150x150'"></div>
++<div+my-page-background+key="'3'"+mysrc="'http://placehold.it/100x100'"></div>
</div>|3513847|3513848|entityMap^0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|Q|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|R|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|S|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|U|8|@]|9|@]|A|$]]|$1|N|3|-4|5|6|7|V|8|@]|9|@]|A|$]]]|O|$]]

<p>Here is a directive that embeds your image as a background, and waits to show itself until after the image has loaded.  You can include variables inside the "mysrc" parameter as needed to generate different images (such as from within an ng-repeat).</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('foo', [])
  .directive('myPageBackground', function() {
    return {
      scope: {
        key: '=', // used for ID of the element; if you set the ID externally to the directive you could omit this
        mysrc: '=' // used for the URL of the desired background image
      },
      template: '&lt;div ng-show="showMe" class="pageBackground" id="page_{{key}}" ng-style="{\'background-image\':\'url({{mysrc}})\'}"&gt;&lt;/div&gt;',
      link: function(scope) {
        var img = new Image();
        img.onload = function() {
          scope.showMe = true;
          scope.$apply();
        };
        img.src = scope.mysrc;
      }
    }
  });</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.pageBackground {
  width: 200px; height: 200px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;div ng-app="foo"&gt;
  &lt;!-- Done with hardcoded values here, just for demo: --&gt;
  &lt;div my-page-background key="'1'" mysrc="'http://placehold.it/200x200'"&gt;&lt;/div&gt;
  &lt;div my-page-background key="'2'" mysrc="'http://placehold.it/150x150'"&gt;&lt;/div&gt;
  &lt;div my-page-background key="'3'" mysrc="'http://placehold.it/100x100'"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>


blocks|key|464408|text|如果你总是使用相同的class="pageBackground"，那么你的背景图像总是相同的。您可以将其加载到隐藏图像中，以便浏览器对其进行缓存：|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|464409|<img+src="url"+style="display:none;"/>|code-block|syntax|javascript|464410|或者在页面加载时使用javascript预加载：|464411|var+img+=+new+Image();
img.src+=+'some+url';|464412|我相信，这篇文章是由用户交互触发的，这肯定是在页面加载之后发生的，所以图像已经位于浏览器中，当您应用class="pageBackground"时，它将立即出现|464413|希望这能有所帮助！|464414|entityMap^0|A|M|0|0|0|0|1E|M|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@$9|V|A|W|B|C]]|D|@]|E|$]]|$1|F|3|G|5|H|7|X|8|@]|D|@]|E|$I|J]]|$1|K|3|L|5|6|7|Y|8|@]|D|@]|E|$]]|$1|M|3|N|5|H|7|Z|8|@]|D|@]|E|$I|J]]|$1|O|3|P|5|6|7|10|8|@$9|11|A|12|B|C]]|D|@]|E|$]]|$1|Q|3|R|5|6|7|13|8|@]|D|@]|E|$]]|$1|S|3|-4|5|6|7|14|8|@]|D|@]|E|$]]]|T|$]]

<p>If you're always using the same <code>class="pageBackground"</code>, then you background image is always the same. You can load it in the hidden image, so browser caches it:</p>

<pre><code>&lt;img src="url" style="display:none;"/&gt;
</code></pre>

<p>Or preload with javascript on page load:</p>

<pre><code>var img = new Image();
img.src = 'some url';
</code></pre>

<p>I believe, that post is triggered with user interaction, which happens definitely after page has been loaded, so the image already sits in browser and it will appear immediately when you apply <code>class="pageBackground"</code></p>

<p>Hope this helps!</p>


blocks|key|5625866|text|您可以使用ngSrc指令而不是div。此外，您可以尝试使用小型延迟加载图像库，如ng-lazy-img。|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|5625867|我希望这对你有帮助！|5625868|entityMap|0|LINK|mutability|MUTABLE|url|https://docs.angularjs.org/api/ng/directive/ngSrc|1|https://github.com/afklm/ng-lazy-image^0|5|5|0|14|B|1|0|0^^$0|@$1|2|3|4|5|6|7|P|8|@]|9|@$A|Q|B|R|1|S]|$A|T|B|U|1|V]]|C|$]]|$1|D|3|E|5|6|7|W|8|@]|9|@]|C|$]]|$1|F|3|-4|5|6|7|X|8|@]|9|@]|C|$]]]|G|$H|$5|I|J|K|C|$L|M]]|N|$5|I|J|K|C|$L|O]]]]

<p>You could use <a href="https://docs.angularjs.org/api/ng/directive/ngSrc" rel="nofollow">ngSrc</a> directive instead of a div. In addition, you could try to use a tiny lazy loading image library such as <a href="https://github.com/afklm/ng-lazy-image" rel="nofollow">ng-lazy-img</a>.</p>

<p>I hope that helps!</p>


blocks|key|2371099|text|下面是一个使用Image对象的全功能示例。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2371100|​|2371101|function+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,+function(image)+{
++++var+img+=+new+Image();
++++img.onload+=+function()+{
++++++$scope.$apply(function()+{
++++++++image.loadedSrc+=+image.src;
++++++});
++++};
++++img.src+=+image.src;
++});
}|code-block|syntax|javascript|2371102|.hasSrc+{
++color:+purple;
++padding:+10px;
}|2371103|<script+src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div+ng-app>
++<div+ng-controller="AppCtrl">
++++<div+ng-repeat="image+in+images"+ng-class="{+hasSrc:+!!image.loadedSrc+}"+style="background-image:+url({{image.loadedSrc}})">
++++++<h2>THIS+IS+SOME+TEXT+BEING+USED</h2>
++++++<p>
++++++++This+text+is+being+used+for+illustration+purposes+only.
++++++</p>
++++</div>
++</div>
</div>|2371104|2371105|调整它以满足您的目的应该很容易。|2371106|entityMap^0|0|0|0|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|T|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|F|7|U|8|@]|9|@]|A|$G|H]]|$1|K|3|L|5|F|7|V|8|@]|9|@]|A|$G|H]]|$1|M|3|C|5|6|7|W|8|@]|9|@]|A|$]]|$1|N|3|O|5|6|7|X|8|@]|9|@]|A|$]]|$1|P|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|Q|$]]

<p>Here's a fully-functioning example using the Image object.</p>

<p><div class="snippet" data-lang="js" data-hide="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function 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, function(image) {
    var img = new Image();
    img.onload = function() {
      $scope.$apply(function() {
        image.loadedSrc = image.src;
      });
    };
    img.src = image.src;
  });
}</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>.hasSrc {
  color: purple;
  padding: 10px;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
&lt;div ng-app&gt;
  &lt;div ng-controller="AppCtrl"&gt;
    &lt;div ng-repeat="image in images" ng-class="{ hasSrc: !!image.loadedSrc }" style="background-image: url({{image.loadedSrc}})"&gt;
      &lt;h2&gt;THIS IS SOME TEXT BEING USED&lt;/h2&gt;
      &lt;p&gt;
        This text is being used for illustration purposes only.
      &lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>It should be easy enough to adapt this to suit your purposes.</p>


blocks|key|5625895|text|你可以从angular+promises中获得帮助。如果图像按照承诺的方式加载，则渲染视图，否则不会。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5625896|您可能已经检查过此链接。|5625897|preloading-images-in-angularjs-with-promises|offset|length|5625898|谢谢|5625899|entityMap|0|LINK|mutability|MUTABLE|url|http://www.bennadel.com/blog/2597-preloading-images-in-angularjs-with-promises.htm^0|0|0|0|18|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@]|A|$]]|$1|D|3|E|5|6|7|T|8|@]|9|@$F|U|G|V|1|W]]|A|$]]|$1|H|3|I|5|6|7|X|8|@]|9|@]|A|$]]|$1|J|3|-4|5|6|7|Y|8|@]|9|@]|A|$]]]|K|$L|$5|M|N|O|A|$P|Q]]]]

<p>You can take help from angular promises. If the image is loaded as promised render the view else not. </p>

<p>You may already checked this link.</p>

<p><a href="http://www.bennadel.com/blog/2597-preloading-images-in-angularjs-with-promises.htm" rel="nofollow">preloading-images-in-angularjs-with-promises</a></p>

<p>Thanks</p>


blocks|key|5625909|text|在这里寻找解决方案：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|5625910|How+can+I+tell+when+a+CSS+background+image+has+loaded?+Is+an+event+fired?|offset|length|5625911|您要做的是创建一个不可见的partner元素来加载相同的图像。当且仅当该图像已加载(onload事件)时，您才会显示其他元素，例如：|5625912|<div+ng-repeat="key+in+[]+%7C+range:data.pages"+ng-init="_imageLoaded={}">
++++<div+ng-show="_imageLoaded[$index]"+class="pageBackground"+id="page_{{+(key%2B1)+}}"+ng-style="{'background-image':'url(/images/{{data.id}}/{{(key%2B1)}}.png)'}">
++++<img+ng-show="false"+src="/images/{{data.id}}/{{(key%2B1)}}.png"+onload="_imageLoaded[$index]+=+true;"+/>
++++
</div>|code-block|syntax|javascript|5625913|entityMap|0|LINK|mutability|MUTABLE|url|https://stackoverflow.com/questions/6285809/how-can-i-tell-when-a-css-background-image-has-loaded-is-an-event-fired^0|0|0|21|0|0|0|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@$D|W|E|X|1|Y]]|A|$]]|$1|F|3|G|5|6|7|Z|8|@]|9|@]|A|$]]|$1|H|3|I|5|J|7|10|8|@]|9|@]|A|$K|L]]|$1|M|3|-4|5|6|7|11|8|@]|9|@]|A|$]]]|N|$O|$5|P|Q|R|A|$S|T]]]]

<p>Look here for a solution:</p>

<p><a href="https://stackoverflow.com/questions/6285809/how-can-i-tell-when-a-css-background-image-has-loaded-is-an-event-fired">How can I tell when a CSS background image has loaded? Is an event fired?</a></p>

<p>what you do is you create an invisible partner element loading the same image. if and only if that image has been loaded (onload event) you show your other element, so for example:</p>

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


<p>I have the following <code>ng-repeat</code> that grabs data from a <code>$http.post</code> call and stores it into <code>$scope.data</code>.</p>

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

<p>What normal happens is the <code>.pageBackground</code> class will load before the background image does on the screen. I'd like nothing to show up until the <code>background-image</code> is actually loaded but I haven't been able to figure that out.</p>

<p>Does anyone have any suggestions?</p>


Angularjs wait until div background-image shows

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

我有以下从$http.post调用中获取数据并将其存储到$scope.data中的ng-repeat。<div ng-repeat="key in [] | range:data.pages">    <div class="pageBackground" id="page_{{ (key+1) }}" ng-styl...

问Angularjs等待div背景-图像显示
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Angularjs等待div背景-图像显示EN